DEV Community: Balaji Jayakumar

AI Powered unit testing ✨

Balaji Jayakumar — Sun, 21 May 2023 00:40:59 +0000

What I built

AI unit Tests Generator. This project uses Github actions to write unit-tests for your code.

Category Submission: Maintainer Must-Haves

App Link

https://github.com/killswitchh/ai-unit-test

Screenshots

Source Code

Generated AI Tests

Description

A Github action that uses GPT to generate unit-tests for your code

Link to Source Code

https://github.com/killswitchh/ai-unit-test

Permissive License

MIT License

Background (What made you decide to build this particular app? What inspired you?)

Open Source projects have a lot of intricate details and new features that are getting added frequently. Unit testing is a way to make sure that the features don't have any regression impacts and will encourage the developer to make large refactors without any fear.

This tool just makes that process a bit easier, whenever a branch is forked for a new feature, upon every push to the branch. This Github action will automatically write unit-tests for the added files.

So by the time the pull request gets generated to merge to main, it will have a set of AI generated unit-tests for the feature reducing developer's time to write these tests.

Here's a diagram to explain the flow.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I Used Github actions to run a python script that integrates with Open AI to generate unit-tests for the code files.
I learnt using Github actions and Open AI's library while building this. I was new to both of them.
The community submissions also inspired me a lot here!

Additional Resources/Info

I would like to thank the organizers for setting up and running this event. It is brining a lot of developers together and everyone is learning something new!

AI Video Generation - Where are we today?

Balaji Jayakumar — Sat, 13 May 2023 19:07:33 +0000

Have you ever wondered how AI is changing the world of video generation?

In recent months, there have been major advances in AI video generation. This technology is still in its early stages, but it has the potential to revolutionize the way we create and consume video content.

In this blog post, we will discuss the latest advances in AI video generation and explore the potential applications of this technology. We will also provide some examples of how AI video generation is being used today.

Lets Read on to learn more about this exciting new technology!

Generative AI for Images

A video is nothing but a set of arranged images displayed in a rapid succession. Let's have a look at Generative AI Imaging before we go to videos.

This is a very popular topic and it has already affected a lot of sectors including digital art, content-creation. When it comes to AI image generation there are 4 main players.

MidJourney
DALL-E
Adobe Firefly
Stable diffusion

These models are trained on massive datasets of images, and they can use this data to create new images that are both realistic and creative.

I went ahead and gave a same prompt to all 4 models.
PROMPT: Award-winning landscape photography

AI for videos

It all started with this viral video of will smith eating spaghetti.

ModelScope is a diffusion model from Alibaba that can generate new videos from prompts. chaindrop used ModelScope to create a video of Will Smith eating spaghetti. They first generated the video at 24 FPS, then used Flowframes to increase the FPS to 48 and slow it down to half speed.

Of course, ModelScope isn't the only game in town regarding the emerging field of text2video. Runway debuted "Gen-2" and Stability AI also released an SDK for videos.

With Stable Animation SDK, you can create animations in three different ways:

Text to animation
Text + image to animation
Video + text to animation

While this is not anything new and a lot of community-made solutions like Deforum (https://lnkd.in/gb4eqbzg) have been existing for the past few months, the ease of use of an SDK will enable a lot of creative projects.

Stable diffusion also released Control Net.
ControlNet is a neural network that adds extra conditions to diffusion models to control image generation. This allows for unprecedented levels of control over the content, style, and composition of generated images.

Cant wait to see what else the world has to offer!

Google IO 2023 - Whats new in AI?

Balaji Jayakumar — Wed, 10 May 2023 21:47:36 +0000

Google IO just got over and it was packed with exciting information, Here are a few highlights.

PaLM 2

Google AI introduces PaLM 2, a new language model with improved multilingual, reasoning, and coding capabilities. It is available in four sizes, from Gecko (small and fast enough for mobile devices) to Unicorn (large and powerful).

Learn more here

Bard

Google

@google

Today we’re removing the waitlist process and making Bard available in over 180 countries and territories, with more coming soon. 🎉#GoogleIO

17:27 PM - 10 May 2023

Google AI's Bard is now available to over 180 countries and is powered by PaLM2, a new language model with improved multilingual, reasoning, and coding capabilities. Bard can do things like generate text, translate languages, write different kinds of creative content, and answer your questions in an informative way.

Here are a few features of Bard with PaLM2:

Multilingual: Bard can understand and generate text in over 100 languages.
Reasoning: Bard can perform complex logical reasoning and solve math problems.
Coding: Bard can generate code in a variety of programming languages.
Creativity: Bard can generate different creative text formats, like poems, code, scripts, musical pieces, email, letters, etc.
Information: Bard can answer your questions in an informative way, even if they are open ended, challenging, or strange.

Vertex AI

Vertex AI is a fully managed machine learning (ML) platform that helps you build, deploy, and scale ML models faster. It provides a unified data and AI platform, tooling for pre-trained and custom models, and MLOps practices to efficiently scale, manage, monitor, and govern your ML workloads. New customers get $300 in free credits to spend on Vertex AI.

Check it out here

Mediapipe

Check it out here

A suite of customizable ML solutions makes it easy to create innovative on-device ML solutions. These solutions are designed to be easy to use, even for beginners, and include advanced ML solutions for popular tasks, such as face detection, pose estimation, and object tracking. They are also fast and efficient, making them ideal for a wide range of applications, from mobile devices to embedded systems.

Thanks for reading! and let me know what your favorite announcements from Google IO were.

From Idea to Deployment: How I Built Devlinks

Balaji Jayakumar — Sun, 23 Apr 2023 13:19:46 +0000

I recently finished building devlinks, a developer focused link aggregator similar to Linktree and Beacons. I would like to share the process of how I converted this idea I had into a fully functional website within a month. I will try to keep this as beginner friendly as possible so everyone despite their proficiency in coding can follow along.

The Idea

Honestly this is the hardest phase for any project. The process for this is very simple. Start by finding a problem that you are facing, and then ideate on what you could do for solving your problem.

With software engineering you are never solving a problem for the first time. Break down your problem into smaller sub-problems and chances are someone has already encountered that sub-problem and know their way around it.

The Problem

I'm a person active on Github, Leetcode and Github and I wanted to showcase my all of them in my resume. I started to question, Is there some product that can help me put all of my links in a single page, which I can then link in my resume.

There were a bunch of websites that did the same, like Linktree, beacons, Kofi. But all of these offerings missed something, They all catered to common audience and were not specific to a group of people.

Whenever you widen the scope for anything, you wont be able to delve deep into it. I wanted something like Linktree, but focused for developers. I wanted to show more than just the link name in the landing page. I wanted the visitor to see more details about my Github and other developer related socials.

Now that I have a defined problem statement, I can start working towards a solution.

Development

Development of any product has a few stages

Feature Extraction
Design / Architecture
Implementation
Deployment

Feature Extraction

Any part of application development starts by breaking the product into a set of features. Here are the features I wanted in my product.

1. User should be able to login and create a profile
2. They should be able to create and update a link page with their desired name
3. They should be able to add links to the page.
4. They should be able to view their created page in `<website_name>/<page_name>`.
5. If a link added is a developer related link (Github, Stack Overflow, Leetcode), the page should display additional information.

Now that we have an overall idea of what we want in our application.

Architecture

This stage of an application is where you decide what you build the application with and how the components of your applications are going to work together to solve your problem.

From the feature extraction step, I was able to isolate a few components for my application

A Database to store the user and link details
A back-end server that can talk to the database.
A customer facing front-end application to provide the user with an interface to talk to the backend.

Database

We have some data to store, how we want to store the data is the next question we have to answer.

Since I didn't have many relations in my feature, I decided to go with a document based DB. But going ahead with a relational Database also wouldn't be a bad choice here.

Now that we decided the type of database, we should pick a database provider. I picked Mongo Atlas because I already have an account there. But there are other viable options like Planet Scale DB or Supabase which have a generous free tier offering.

We now want an ORM to talk to the database for us, Prisma has been around this space for a while and it has a very robust integration with a lot of database providers including MongoDB so it was a no brainer to not pick this.

Framework

Now that the database is defined, we need a backend and a front-end to talk to the database. I'd like to point you to another article I wrote which has me trying out different frame works.

I got extremely impressed by SvelteKit while trying out different frameworks and wanted to build all of my apps using that. Try it out if you haven't and give the creators some love.

Svelte kit is a framework which supports Server side rendering, So I used the server part of the application to integrate with the Database and the client side of the application to interact with the User.

Implementation

Great, now we have a backend layer and an ORM to talk to the database, all that's left is to setup the frontend interface for the same and start building.

Lets tackle our feature list one by one.

For the authentication, I used Supabase. I wanted users to login via Github and Supabase has a really good SvelteKit integration to handle the same.

The implementation part will have a lot of places where you question your sanity / your ability to code. These are phases every developer goes through and the best ones don't give up.

Here are a few learnings I thought will be useful for every developer

Be willing to unlearn
Deleting code is almost always better.
First, make it work then make it better.

Deployment

I have the app ready and running in my local, I want to setup deployment so that I the site is live and available for anyone to use.

We have a lot of cloud providers who facilitate deployment. AWS, GCP, Azure have their own services that allow developers to deploy their site. We also have services like Netlify and Vercel that integrate with these cloud providers simplifying the deployment process.

Vercel was my choice for this, since they have built-in support for SvelteKit integration, and also offer a generous free tier for all personal projects. I linked the deployment to the domain I bought from hostinger.com

And there we go! that's how devlinks was made. It so happened that svelte was organizing a hackathon at the same time, so I used this as an entry for the same.

One App 5 Frameworks - Chapter 5: Qwik

Balaji Jayakumar — Sat, 18 Mar 2023 11:18:38 +0000

The Second framework which I picked up that's focused on Server Side Rendering is Qwik.

Qwik entered the industry in the last quarter of 2022. And it has already secured the 3rd Place right after Svelte in the State Of JS survey. This has been a framework that's constantly talked about in the tech twitter space also.

It made no sense to not include Qwik as my second SSR framework in the series

What is Qwik

Qwik is a web-framework that focuses on optimizing SSR by introducing a concept called resumability.

Qwik allows fully interactive sites to load with almost no JavaScript and pickup from where the server left off. We'll go into resumability and other optimizations in the article as well.

As users interact with the site, only the necessary parts of the site load on-demand. This precision lazy-loading makes sure that the JavaScript which will be absolutely required by the user is only loaded.

SSR optimizations

When you opt for Server Side rendering, optimizations have to be made to give the end user the best experience in terms of page load.

Some frameworks like Solid and Next achieve this by a concept called Hydration / Partial Hydration while Qwik achieves this using Resumability

Hydration vs Resumability

Here is a really good article that explains both of these concepts in a very detailed manner.

During Hydration, the code needs to be executed at two places, once at the server for creating the HTML and also once at the client for prepping it up for interactions.

During HTML pre-rendering, resumability allows a framework to recover its state without re-executing the application components on the client by serializing not only the application state but also the framework state. This prevents the second execution of the code in the client side. There by making the site very fast

Learning Curve

Even though Qwik is relatively new to the scene, The documentation and tutorials are on par with some of the Seasoned Frameworks. It didn't take me long to get started with the framework.

However, Qwik does have a steep learning curve, as it provides separate functions to execute code on the server as well as the client. You'll be able to get a working site up but you'll need to invest proper time to make use of all the optimizations that Qwik is providing.

Their Discord community is also very active and were able to clarify some of my doubts on which I wasn't able to find a proper answer in the documentation.

Developer Experience

Qwik also comes bundled with Vite and Vitest and with prebuilt command line tools to deploy it to Vercel, Netlify etc. Which makes development, building and deploying super intuitive.

If you know React, you know Qwik. Qwik follows a structure which is very similar to React, built with JSX and includes all the other features that react has to offer.

For routing, I used Qwik City, which is Qwik's file-based opinionated routing system. For maintaining states I used the built in context-APIs

Conclusion

Qwik is one of the fastest frameworks focused on SSR out there and while it is production ready, the learning curve to use the framework efficiently makes me consider it as a second choice after SvelteKit.

Checkout the application here.

One App 5 Frameworks - Chapter 4: Svelte/ SvelteKit

Balaji Jayakumar — Sat, 18 Mar 2023 08:07:33 +0000

Now that we've explored a few Client Sided Rendering frameworks, its time to get into the Server Side Rendering space.

What is Server Side Rendering (SSR)

Server-side rendering (SSR) is the process of rendering web pages on the server and sending them to the client as fully-formed HTML pages, rather than sending just the JavaScript, CSS, and other assets and having the client render the page.

Advantages and Disadvantages

Advantages

Better initial page load time and perceived performance, as the client receives a fully-formed HTML page from the server instead of having to wait for JavaScript to download and execute before rendering the page.
Better SEO and social media integration, as search engines and social media crawlers can see the fully-formed HTML page and index it correctly.
Improved accessibility, as the fully-formed HTML page can be rendered by text-only browsers and assistive technologies.

Disadvantages

Higher server load, as the server has to generate the HTML content for each request, which can be resource-intensive.
Higher time to first byte (TTFB), as the server has to process the request and generate the HTML before sending it to the client.
Limited interactivity, as most of the page logic and user interactions are handled on the server side, which can limit the types of interactive features that can be implemented.

Now that we know what Server Side Frameworks are, I'll start sharing about my experience building our Github repositories app in two of the latest meta SSR Frameworks.

The first one in this list is SvelteKit. Svelte has been under my radar for a long time as it constantly showed up as one of the top two frameworks in the State Of JS Survey that happens every year.

Svelte

Svelte is a modern JavaScript framework for building web applications. It takes a different approach to building applications compared to traditional frameworks like React, Angular, and Vue.

Instead of building applications using a virtual DOM (which is the approach used by most modern frameworks), Svelte compiles your application code into highly efficient imperative code that directly manipulates the DOM.

This can result in smaller, faster applications that consume fewer resources and can provide a smoother user experience.

SvelteKit

SvelteKit is the Server Side rendering framework that is built on top of Svelte. I couldn't put it any better than how they've put it in their official website.

SvelteKit is the framework that grows with you! Start simple and add new features as they come

I was greeted with a very basic app with typescript and Vite built-in making it very easy for me to get going with building the app even though I had no experience working with the framework before

Developer Experience

This takes us straight into the developer experience and learning curve.

Svelte and SvelteKit are both very easy to learn. In fact, I was able to build the application from scratch using Svelte in just 45 minutes, which was faster than any of the other 5 frameworks I'm currently experimenting with.

Their documentation and REPL along with the interactive tutorial made me understand the framework super quick.

Application

SvelteKit comes with built in file based routing and a store which made it extremely easy to implement the app. I didn't have to download any external package in the project and Svelte was able to house the entire application with its inbuilt features.

Native integration with typescript and Vite also increased the developer experience by a lot.

Conclusion

SvelteKit is a really good SSR framework built on top of Svelte which is very quick to pickup and still has a lot more to offer. The framework grows with the app and will easily be my go-to framework for any of the applications that I'll be building in the upcoming days.

Checkout the Application here

One App 5 Frameworks - Chapter 3: Angular

Balaji Jayakumar — Sat, 18 Feb 2023 07:53:25 +0000

Angular is a full-featured framework developed by Google. It's powerful and feature-rich, making it a good choice for large-scale applications.

Learning Curve

Angular has a very steep learning curve. You can get started with your application in the initial few hours/days, but it takes months / years to learn to do things the 'Angular' way. It's inbuilt support for RxJS just adds to this learning curve. However, when mastered, these tools bring in a plethora of customizations you will find useful for all possible scenarios that you might encounter in an application.

Community

Angular, being backed by Google has one of the best communities in the framework industry. They have a team of dev-rel engineers who constantly interact with the community collecting feedback from the people who use their product.

They also have an annual developer survey to gather the insights and recommendations from the users of the framework, top recommendations from the survey directly translate to features in upcoming releases.

Developer Experience

Angular has a more complex syntax and a strict structure when compared to lightweight libraries like React and Vue, but it comes with a lot of built-in features that can save time and effort.

Also all the Angular applications follow a very similar structure making it easy for any angular developer to get used to a new project.

The built in libraries for Routing, HTTP requests make it a very easy experience for developing large scale applications. With the release of the new stand-alone components, smaller applications can also be built pretty quick with angular.

I used NGRX for state management, and while it also had a learning curve when compared to redux, it got the job done.

Conclusion

Angular will be my recommendation if you want to build a very large application at enterprise standards. The rich feature set of angular made sure that this is achievable.

While it also scales well with smaller application due to the recent changes around the introduction of stand-alone components, there are multiple other frameworks that achieve the same in less effort.

Application

You can find the application here

One App 5 Frameworks - Chapter 2: Vue

Balaji Jayakumar — Fri, 17 Feb 2023 19:29:35 +0000

Vue is a lightweight, easy-to-learn JavaScript framework that's great for building user interfaces. It has a simple syntax and a reactive data model, making it easy to build dynamic, interactive applications.

Learning Curve

In my experience, Vue has the lowest learning curve of the three frameworks. Its simple syntax and clear documentation make it easy to get started, even for developers who are new to front-end development.

Angular, on the other hand, has a much steeper learning curve. It has a lot of features and concepts to master, and it can be overwhelming for developers who are new to the framework.

React falls somewhere in between, with a moderate learning curve. It's relatively easy to pick up, but you'll need to use third-party libraries to add additional functionality.

Performance

When it comes to performance and scalability, all three frameworks are capable of building high-performance applications.

That said, Vue has a reputation for being particularly fast, thanks to its lightweight design and efficient rendering engine. Angular and React are also fast, but they may require more optimization to achieve the same level of performance as Vue.

Developer Experience

Vue has a simple syntax and a clear separation of concerns between the template, script, and style, making it easy to understand and maintain.

I used Pinia as a store for the application I built, Its very lightweight and integrates very well with vue3.

Conclusion

Vue is a very strong recommendation from me if you want to learn web development and don't have the time to explore and cherry pick all the options that react has to offer.

with Nuxt serving all the SSR requirements, Vue will be one of the frameworks I will take into initial consideration while developing any web application.

Application

Checkout the application here.

One App 5 Frameworks - Chapter 1: React

Balaji Jayakumar — Tue, 03 Jan 2023 16:52:14 +0000

With over 15,000,000 downloads on npm, React is one of the most popular frameworks out there. It was a no brainer to not have it included in the series.

Please note: I already have experience working with Angular, so I've tried to formulate these points from an angular developer's POV.

Programming paradigm

React uses a functional programming paradigm, which is different from the object-oriented programming paradigm that I used in Angular.

✨Hooks✨

React hooks are functions that allow you to add state and side
effects to functional components in React. This concept took the longest time for me to understand.

But The ability to make custom hooks and the wide variety of community-developed hooks helped me understand the importance of using them. Hooks are my favorite feature in React.

Redux / React router:

One more thing that I realized while developing with react is how lightweight it is when compared to Angular. You don't get a lot of built-in features. Which reduces the bundle size and also gives customizability to the developer.

I used Redux for state management. But the freedom of choice is given to the developer here, a few alternatives that I considered are the built-in context APIs and Pullstate.

Application

Checkout the application here.

Building an app using 5 JavaScript Frameworks - Introduction

Balaji Jayakumar — Tue, 03 Jan 2023 16:39:44 +0000

The last thing the world needs is another Javascript Framework - Jeff Delaney

Intro

I started my professional Software Engineering journey in 2020 and have been working on Angular since then. I wanted to try out the other frameworks and wanted to document the learning along the way.
What better way to learn something than by building something with it? So let's build the same application on all 5 Frameworks and perform a comparison
I'm going to rank these frameworks along the way on a few parameters.

Learning Curve
Community
Ease of Use
Developer Experience

The Application

I wanted the application to have a certain set of features to replicate real-world application development. We'll be building a single-page application that lists the repositories for a GitHub user. This application will have

Routing
Data Store
API Interaction

I'll be using Typescript, ESLint, and prettier as a standard for code hygiene and Bootstrap for styling

The Frameworks

Choosing the frameworks was one of the less complex part in this entire journey. I wanted to make sure I cover almost all the variants in the front-end category and did not want to miss some of the latest and greatest meta-frameworks for SSR. After a few minutes of research I ended up with this list.

Conclusion

You can checkout the apps here.

The choice of what framework to use is completely dependent on the problem you are trying to solve. Each framework has its own sets of pros and cons that may aid or hinder the solution you would like to build for your specific problem.

I'd also like to include this cool guide to frameworks in 2023 by @t3dotgg