DEV Community: Divyansh Singh

Diving into the GitHub Octernships program with OpenSauced

Divyansh Singh — Thu, 24 Aug 2023 13:08:00 +0000

In my last blog post, I shared how I got selected for the GitHub Octernships program and how you can too. If you haven't read it yet, you can check it out here. For this post, I'll talk about what I actually did in the Octernship, how it helped me improve as an open source developer and grow professionally.

What we worked on

Anush (my fellow Octern) and I knew that we would work on a chrome extension because of the assignment that we did to get selected. What we didn't know, was the new things we were going to learn, and the amazing people we were going to meet.

When we started work on the open-sauced/ai chrome extension, it didn't even have a name, so yes, we were excited about being the proud maintainers and writers of the first few lines of code of a potentially big and impactful project.

I kicked things off by setting up the base for the extension popup with React, after a meeting with Anush and OpenSauced's founder, Brian. Before this, only one issue existed with people from the OpenSauced team discussing what the extension could possibly become.

After this, we requested another contributor who's work Brian really liked to work on the User Profile page, they helped us without hesitation and set up some really important context and a beautiful profile page with this PR. Anush worked on adding the "Share OpenSauced Profile" button to GitHub's UI, and other critical bug fixes and performance improvements, while I did the "View on OpenSauced" button.

We worked on a lot of code injection features to modify GitHub's UI and make a simple bridge to OpenSauced that will help us retain and find new users. If you want to know how we did that, this might be a good future read.

For the first 2 months, our work involved working on the extension's frontend and interacting with the OpenSauced API.
For the next two, we changed our focus to AI!

The Pivot

An important part of making products is knowing what sells, and to start focusing on exactly that because that's what will bring people to your app, website, or even chrome extension in this case.

Brian had a great idea of integrating AI features into the extension, and Anush and I were thrilled to work on these. Essentially, these ideas were GPT-wrappers, but integrating them into GitHub was the hard part (selecting and appending content from and into the GitHub UI).

We started with the first feature and were done in a few days.

This feature was a way for contributors to summarise their pull requests and add AI-generated descriptions to them. We summarised the PR by getting the source code or the commit messages that the contributor added. This was a great start. As part of the settings panel in the popup, users could configure the parameters for content generation, like the tone, temperature etc.

Next, we worked on AI features to assist developers during code review. These were a set of 3 features. The first one was implemented initially, and all 3 were merged into a dropdown later.

These features included:

Generating tests for the selected lines of code during PR review.
Generating refactor suggestions.
Generating code explanations.

This was another important feature that allowed us to dream up new features and to attract contributors who were excited about the applications of AI. We worked on these AI wrapper features for about a month, and then we switched to the last phase of features planned for the chrome extension.

RepoQuery

RepoQuery is an AI tool to index public GitHub repositories and answer user queries about them.
The idea for RepoQuery came from one of Anush's projects that he made for a hackathon, DocQuery. DocQuery does the same thing that RepoQuery does, but for documents.

Anush worked on the backend for RepoQuery with Rust and Qdrant, while I worked on the frontend chat dialog that would appear on the home page for every repository on GitHub, and also the CLI based interactions for repo-query for open-sauced/pizza-cli.

You can start using RepoQuery now by installing the OpenSauced/ai chrome extension.
This was the work that we have been doing for the last few weeks.

Blogs

Technical writing and communication are a really important skill that every developer must know to share their ideas and knowledge with other members of the community. Blogging is something I always wanted to do but procrastinated about.

I wrote and published my first blog as part of the GitHub Octernships program, and worked with a professional content writer for the first time too. Bekah is the Developer Experience Lead at OpenSauced, and has a lot of experience writing content. She even taught technical writing to University students, so I knew I was in good hands.

She read through all my blogs and reviewed them, which requires a lot of patience and skill that I admire.

After I wrote my first blog, I reached 500 followers on dev.to in no time, and crossed the 1k mark with the second one. This was only possible due to the audience Bekah and other writers for the OpenSauced team had gained over a long period of time.

I've written 3 blogs up until now, and have liked writing content, so I’m looking forward to writing more!

Other Repositories

Over the last few weeks, the chrome extension has just needed some bug fixes here and there, and a few QOL improvements. Since it’s been nothing too challenging, Anush and I switched our focus to other OpenSauced repositories to keep challenging ourselves and continue learning new things. Brian and John, an experienced developer at OpenSauced, have supported us in exploring new ways to contribute too.

I made a pull request that integrates RepoQuery with the OpenSauced/pizza-cli CLI application written in Go. Go is a great beginner-friendly language and I always wanted to contribute to a Go-based open source project, which I could do thanks to the Octernship and OpenSauced.

I’ve also worked on the core product for OpenSauced, the insights project. I've added a few features in the last week, to both the backend API written in NestJS and the frontend made with NextJS. I had not worked with NestJS before, but Brandon, the maintainer of the api.opensauced repository helped me get started in the most calm and supportive way possible, which honestly, I wasn't expecting from a senior dev with so much to do (he is also the founder of an Angular based meta framework called Analog).

I look forward to continue working on all three of these repositories and possibly even more in the coming months, thanks to the help and support I've received from the developers at OpenSauced.

What's Next?

I have 2 months until my octernship ends, and I plan to be as useful as I can during this period. I hope to get a remote developer job in the future on the basis of the work I've done during my 6 month octernship, so I need to do as much as I can to put myself out there. I also plan to continue writing blog posts for OpenSauced whenever I get some free time and, of course, continue maintaining OpenSauced/ai and contributing to the various other OpenSauced repositories even after my Octernship ends.

I wish people who have read my Octernship blog posts good luck and hope they get selected for the program too!

How Open Source helped me get into the GitHub Octernships program.

Divyansh Singh — Wed, 02 Aug 2023 13:02:00 +0000

When I first got to know about the GitHub Octernships program, I was surprised by its focus on open source software and real-world software development. I have never liked standard DSA interviews, but have loved building projects and interacting with communities since I started my software development journey a year ago.

After getting selected for the program, I have a firm belief that anyone with the same interests as me can get selected too, and I wish to share my experience with you so you can be the next GitHub Octern!

From the Github Octernships website’s homepage:

The GitHub Octernships program connects students with industry partners in paid professional experiences and mentorship on open source and software development projects.

The program is amazing in itself, but I couldn't have asked for a better organization to collaborate with than OpenSauced. As pioneers in the open source software space, they embody the spirit of innovation, collaboration, and knowledge sharing that drew me to this program in the first place.

Thanks to OpenSauced, not only did I get a chance to work with cool tech, but also with a great community and developers who helped me improve my skills. I wish to share some of my learnings and the project that I worked on with the community through this post.

About Me

In the 11th grade, my journey into software development began with a simple goal: to join my school's computer club. At the time, it seemed like a big deal to me because it meant I would earn a cool hoodie and have unlimited access to the computer lab—an enticing prospect for any aspiring tech enthusiast.

Little did I know that this initial foray into software development would ignite a genuine passion within me. As I delved deeper into the world of coding, I quickly realized the immense potential it held. What fascinated me the most was how accessible it was to upskill myself and create practical applications, whether it was crafting websites or developing useful apps. It was a thrilling experience to witness my ideas come to life and have real-world applications as I completed more and more courses online.

As my journey progressed, I had the opportunity to intern at various companies, both service-based and product-based. It was during these internships that I discovered my preference for working with products. The process of envisioning, developing, and refining a product captivated me. The idea of building something tangible that could potentially make a positive impact on users' lives excited me, and I realized this was where I wanted to focus my efforts.

I started open source software development a few months into my last internship, after one of my colleagues suggested it. When I made my first open source contribution, I realized how much of an impact I could create with this work, especially because of the size of the org I contributed to. My first PR was a feature that I added to the freeCodeCamp codebase; this repo has the highest number of stars on GitHub! I made this contribution in October, and to my surprise, I got an email in December informing me that I was one of the top contributors of 2022 to the freeCodeCamp codebase because of this contribution! I was elated and the sense of satisfaction that I got from this feat was something that I had not experienced before. freeCodeCamp was also the first open source community I was a part of, interacting with the maintainers in their Discord server daily to get my PRs merged and learn more about the codebase!

That’s when I decided, I have to contribute to more Open Source organizations, and so I did. I contributed to many communities and projects in the following weeks, including OpenFoodFacts, Borg Collective, and OpenSauced! I met people I would’ve never met if it were not for open source, and am glad that I could work with an organization that promotes the very thing that I have loved until now!

How it started

By March 2023, opening GitHub had become a part of my daily routine. I eagerly checked my notifications and mentions, to stay connected with the open source communities and projects I was actively involved in. It was during one such routine visit to the GitHub homepage that I stumbled upon a promotional message that sparked my interest. Right there, under the "Latest Changes" section, was an announcement for the all-new GitHub Octernships program.

I clicked on the link, having no idea what this program was and how beneficial it could be for my career back then. As I scrolled through the Octernships website, I realized the immense potential this program held for someone like me.

Unlike traditional internship interviews and selection processes that often focused solely on grilling candidates with questions about data structures and algorithms, the GitHub Octernships program promised a different experience—a chance to showcase my software development and communication skills by giving me an opportunity to interact with the project’s team and work on a problem statement given by them.

While going through the available Octernships, even though I was interested in almost all of them, I really liked the vision and tech behind one, the Octernships with OpenSauced. I read the problem statement, which is available here, and applied immediately because of the impact I knew I would be able to create. We were making a chrome extension for OpenSauced that would bridge the gap between the platform and GitHub, this would help onboard many open source developers to the platform and reduce friction. There was one problem though, I never built a chrome extension before this, so I thought it’ll be difficult to get selected. But I was wrong. Thanks to the CEO and Founder of OpenSauced, Brian, the project’s README was all that I needed to set up a chrome extension and get creative!

The Submission

I was excited to build the chrome extension, because as I shared earlier, I have a passion for product-based software development. There was nothing stopping me now, I read the CRXJS documentation, and was ready to put my JavaScript skills to the test.

Not only did I work on my own extension, but I also tried to help others in discussions and solve other issues in the OpenSauced codebase to get noticed.
I even kept an eye on a discussion where people shared updates about their extension, so I could improve mine. I shared feedback for other features and kept asking Brian and Nick (our second reviewer) for more ideas that I could implement.

Communication is key! I finally got reviews from Brian and Nick, props to them for reviewing around 500 submissions in a few weeks. We merged the PR and I got back to my daily schedule of open source and college. But I made sure to interact on the OpenSauced Discord server and make more contributions to other OpenSauced repositories, after all the decision wasn’t made yet!

There were some confusions regarding the submission, so I’ll try to solve those doubts here:

You follow the “Github Flow” during the submission, which means you have to checkout a branch (submission branch) from the main branch, and do your work there.
You create a pull request from the submission branch to the main branch, this makes it easy for reviewers to view your changes and leave comments. GitHub has great support for code reviews, and you gotta use it!
Once you get all reviews, you can ask your mentor if you can merge your PR. Maybe they won’t reply, but don’t merge your PR so that it’s easier for them to review your PR.

The Result

The wait between the acceptance date and the submission was 3 weeks, but it felt like 3 months! There wasn’t a single day (or night) when I didn’t think about my application. A few days before the acceptance, I thought maybe they didn’t send out rejection emails and I have been rejected. It was sad, but also the only way I could calm myself down. Until…

I got the email I was waiting for! Brian reached out to me and informed me that I had been selected to work with OpenSauced as an Octern. Notice how he mentions my engagement and discussion with the community in the email as well! Open Source is not always just about the code, but also about the connections and community engagements that come with it. I was super excited and stoked to meet my fellow Octern..

To be honest, I already knew who the other person could be, there was only one other person who was interacting with the community and solving issues in other OpenSauced repositories as much as me - Anush! I DM’d him to know if he got selected, and not to my surprise, he was selected too!

I was excited to work with him, and the other experienced OpenSauced developers, people who have worked in various amazing tech companies before! All with just one goal, promoting open source!

The pre-selection journey was thrilling, and full of uncertainty, but ever since I got selected, the GitHub Octernships program has been game-changing in terms of the exposure and development experience that I got. I’ll share my Octernships experience, and the work that I did in a blog next week. Stay tuned!

How to Change a Webpage UI with a Chrome Extension

Divyansh Singh — Wed, 26 Jul 2023 13:54:46 +0000

Have you ever wondered how chrome extensions can change the UI of some of your favorite websites, like YouTube and GitHub? Chrome extensions can be a powerful tool for boosting productivity, helping you to debug code, and sometimes just plain fun. Hopefully, by the end of this blog post, you'll have an idea of how the magic happens, and how you can use content scripts to create your own UI magic through a chrome extension. I'll walk you through the process of how we do it using the OpenSauced.ai chrome extension. If you want to do a deep dive into the extension, there's a link to the repository at the end of this post.

The OpenSauced.ai chrome extension is a versatile tool that helps both open source maintainers and contributors increase their productivity. It uses AI tools and integrates smoothly with the OpenSauced platform to enhance discoverability.

This extension modifies the GitHub web page and adds helpful elements with features to facilitate code reviews, enable direct interaction with OpenSauced on GitHub, and provide additional functionalities such as generating tests and explaining code.

But how does that work exactly? How can a chrome extension insert UI elements into a webpage? 🤔

DOMination: Unleashing the Power of Content Scripts

This is where content scripts play a crucial role. Content scripts are a feature provided by Chrome extensions that allow them to manipulate and modify the DOM (Document Object Model) of a webpage. They act as a bridge between the extension and the webpage, enabling the injection of UI elements seamlessly. By utilizing content scripts, the OpenSauced.ai chrome extension is able to add its useful features and enhance the user experience on GitHub.

Creating a content script for a Chrome Extension

You can create your content script, a standard JavaScript/TypeScript file in the src/ folder for you chrome extension, we later discuss how you register it in manifest.json in the root.

Content scripts can read details of the web pages the browser visits, make changes to them, and pass information to their parent extension. Therefore, we can read the current URL and perform various actions based on the page the user is on!

In the OpenSauced.ai chrome extension, we use this information to decide which element needs to be injected into the page. The "View on OpenSauced" button, for example, should be injected if the current page is a profile page, and the various PR review features should only be injected when the current page is a code review page.

All your conditionals and injections should go inside this content-script. Here's an example snippet from the OpenSauced.ai chrome extension:

if (isGithubProfilePage(window.location.href)) {
        const username = getGithubUsername(window.location.href);

        if (!username) {
            return;
        }
        if (await isOpenSaucedUser(username)) {
            injectViewOnOpenSauced(username);
        }
}

This code checks if the current page is a GitHub profile page, like github.com/diivi, and renders the "View on OpenSauced" button if the user exists on OpenSauced too, easy!

Injecting a custom UI component into the webpage💉

Injecting components into the DOM is as simple as creating a Node through JavaScript's createElement function, and adding it to the DOM by using any method that you like-we use the appendChild method-but there's also insertBefore and other similar methods. Here's a usage example from the OpenSauced.ai chrome extension:

const injectViewOnOpenSaucedButton = (username: string) => {
    if (document.getElementById("view-on-opensauced-button")) {
        return;
    }

This section handles duplicate nodes: we add an id to the node and if a node already exists with that id in the DOM (due to rerenders or other technical issues), we don't append the Node to the DOM again.

    const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);

The ViewOnOpenSaucedButton is a component (Node) that has all HTML, CSS and JS for the "View on OpenSauced Button". We have separated the view from the logic here.

    const userBio = document.querySelector(
        `${GITHUB_PROFILE_USER_PROFILE_BIO_SELECTOR}, ${GITHUB_PROFILE_EDIT_MENU_SELECTOR}`,
    );

    userBio?.append(viewOnOpenSaucedButton);
};

Since we have access to the webpage's DOM, we can find the component we want to inject our Node into, and use the append method to actually inject it.

Registering the Script 📜

Content scripts are registered in the manifest.json file under the "content_scripts" field, like so:

{
 "name": "OpenSauced.ai",
 ...
 "content_scripts": [
   {
      "js": ["src/content-scripts/github.ts"],
      "matches": ["https://github.com/*"],
       ...
   }
 ],
 ...
}

This is a snippet from the OpenSauced.ai chrome extension's manifest.json file. Here, the js key expects an array of the paths where the content scripts to be executed reside, and the matches key expects an array of URLs of the webpages which this content script will be injected into.

Now we run the extension, and voila! 🎉

The button is successfully injected right where I wanted it!

There are a lot of different possibilities for what you can do if you create your own chrome extension. You can find the full code for our chrome extension in our open-sauced/ai repo. As you've seen from the gif at the top of this blog post, our extension has features for refactoring code, writing tests, and explaining code. You can also interact with OpenSauced highlights and more. But there are so many different options for what chrome extensions can do, like adding gifs to your PRs or for interacting with posts online. What have been the most interesting features you've seen in a chrome extension.