DEV Community: Mayank Arya

Stop Being the "Middleware": How I Automated My Entire Git Workflow with AI (not skills)

Mayank Arya — Sat, 07 Feb 2026 11:03:56 +0000

We’ve all had this Friday afternoon.

You’ve been deep in "flow state" for four hours. You’ve fixed a nagging bug in the auth middleware, refactored a messy utility function, and added a new endpoint for the user profile. Your terminal shows 15 files changed across four different concerns.

Now comes the part every developer hates: The Administrative Overhead.

You have to manually stage the files, write a commit, stage the refactor, link the Linear ticket, and eventually write a Pull Request description that doesn’t just say "see commits". In that moment, you aren't an engineer. You are middleware—the manual glue between your IDE, your Git history, and your issue tracker.

I got tired of being the glue, so I built git-ship.

The Invisible Cost of "Commit Hygiene Debt"

We’re often told that "clean commits" are an aesthetic choice. They aren't. They are a functional requirement for high-velocity teams. When we default to git commit -am "update stuff", we accrue "Commit Hygiene Debt":

Reviewer Fatigue: A single PR with one massive commit is impossible to digest. Reviewers end up reviewing line-by-line instead of logic-by-logic.
The Revert Risk: If a feature breaks production, but the commit includes an unrelated refactor, you can't safely undo it. You're forced into high-stress "surgical" hotfixing while the site is down.
Broken Debugging: Powerful tools like git bisect only work if commits represent atomic, functional states.

The Solution: A Context-Aware Pipeline

git-ship is an AI-powered CLI that replaces twenty minutes of manual labor with a single command: gs. It orchestrates an 8-step pipeline that connects the Why (your issue tracker) with the What (your code).

How AI Grouping Actually Works

The hardest part of this was the grouping logic. How do you decide which files belong together? I developed a dual-heuristic model:

The Revert Test (Safety Floor): "If this commit were reverted, would the codebase still compile?". Files with hard dependencies (like a database migration and the code using it) must stay together.
The Review Test (Quality Goal): "Can a reviewer understand this commit in isolation?". We strive for focus—separating tests from implementation and config from features.

The Elephant in the Room: Why not just use a Claude Skill?

An honest question I get often is: If I'm already using Claude Code, why do I need a separate package? If you are living inside a chat-based assistant, a /commit skill might actually be better for your personal flow. It already has the context of your entire conversation. But for professional engineering teams, a dedicated CLI offers advantages that an integrated assistant cannot:

Aspect	git-ship CLI	AI Assistant Skill (e.g., Claude Code)
Context	Reads diffs + fetches tracker data	Knows the "Why" from your active chat history
Accessibility	Works for everyone on the team	Only works for those with a specific subscription
Portability	Can run in any terminal or CI/CD pipeline	Locked to the specific AI environment
Agnosticism	Choose OpenAI, Anthropic, or Gemini	Locked to one provider's ecosystem
Reliability	Degrades gracefully (e.g., works offline)	Requires active API/Socket connection

The Honest Take: If you're in the middle of a deep conversation with Claude, use the skill. But if you want a repeatable, team-wide standard that works across any editor and integrates with your CI/CD, a specialized CLI is the way to go.

Let the AI Handle the Paperwork

The goal of git-ship isn't to replace your judgment; it's to automate the mechanical work so you can keep the judgment calls. By making the "right way" to ship also the "fastest way" to ship, we eliminate the trade-off between speed and quality.

Try it today:
npm install -g git-ship

Open Source:
github.com/thisismayank/git-ship

I would love to hear your thoughts on what your commit pipeline looks like today 👇

Netlify Dynamic Site Challenge : Using the power of CDNs and Transformations for a visual feast

Mayank Arya — Sun, 12 May 2024 22:58:51 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

I built a webpage to display the power of CDNs and image transformations.

Libraries used:

I have used ReactJS to build this webapp
I have also used Material UI to make the webpage responsive.

Assets used:

For the purpose of this project, I used a set of preloaded images.
I've used normal <img src={url} alt={text}/> tags, therefore, the code will run exactly the same even when the images are coming in the form of a url from a database.

Netlify CDN and transformations:

As the code has been deployed on Netlify, the images are being fetched from the Netlify CDNs
I utilised the power of image transformations that come out of the box with Netlfiy CDN
It can be done with the help of query parameters like w for width, h for height, fit for fit, fm for format and q for quality

These transformations can allow us to control the amount of data being downloaded by the browser to display these assets, this can be especially helpful when we upload high quality images but want to show the same image in a small thumbnail.

UI and UX elements

On top is the url, which reflects the image url with all the transformations that the user selected.
The UI is basically divided into three parts
Left side is the list of images that the user can select
Middle part is the image being displayed based on the transformations - you will also find the caption below the image explaining the meaning of the fit you choose.
Right side is the section from which the user can control transformations

On the right side you will also see the difference in the size of the image being downloaded by the user in real time with each user transformation.
For example:
A Quality 100 image will be bigger in terms of bytes than a Quality 1 image - this control is the biggest advantage of transformations!

Demo

Link to the website

Platform Primitives

I've used an image processing and delivery service, specifically a CDN (Content Delivery Network), to manage and optimize images dynamically.

1. Dynamic Image URL Construction

I used a buildImageUrl function that dynamically constructs URLs based on various parameters like width, height, format, quality, and fit.
These query parameters are controlled by the user on the UI and they request specific transformations from the Netlify Image CDN, which processes and serves optimized versions of the images based on these parameters.

const buildImageUrl = () => {
  const { url } = images[selectedImageIndex];
  return `${baseUrl}?url=${encodeURIComponent(url)}&w=${imageWidth}&h=${imageHeight}&fit=${fit}&fm=${format}&q=${quality}`;
};

Key Features Leveraged:
Width and Height: Dynamic resizing of images to fit within specified dimensions without downloading the full-size image, reducing bandwidth usage.
Format: Automatic conversion into different formats (e.g., WebP, JPG) based on the user's capabilities and settings, enhancing compatibility and performance.
Quality: Adjusting the compression level to balance between image quality and file size, crucial for performance optimization.
Fit: Specifies how images should fit within specified dimensions, which is essential for maintaining the aspect ratio or covering a specific area.

2. Fetching and Displaying Optimized Images

I used a function to fetch the image from the constructed URL and calculate its file size.
This demonstrates the image’s weight after being processed by the CDN, providing real-time feedback on optimization benefits.

const fetchImageSize = async () => {
  const response = await fetch(buildImageUrl());
  const blob = await response.blob();
  setFileSize(blob.size / 1024); // Convert bytes to KB
};

3. React Hooks for real time updates

React's useEffect hook is used to automatically update the image whenever relevant parameters change.
This ensures that any adjustments made to the settings by the user are immediately reflected in the image served, showcasing the real-time capabilities of the CDN.

useEffect(() => {
  fetchImageSize();
}, [imageWidth, imageHeight, fit, format, quality]);

I will be making another submission for this.

Conclusion
Rapid increase in media consumption have made CDNs a necessity. Netlify's powerful transformation features and ease of integration provide a much welcomed addition to the arsenal of developers.
I have tried to keep the UI/UX as interactive and user-centric as possible and also tried to educate the user with real time changes in sizes and definition of some terms on the UI.
I hope you all enjoy using the project as much as I enjoyed working on it.

Thank you!

The Git Supremacy

Mayank Arya — Mon, 11 Nov 2019 12:55:46 +0000

After addressing the elephant in the room (Git vs GitHub).
Let's look at how to start working with both.

Scenario 1:

You are going to work on a repository that already exists.

FORK

Forking is copying the contents of the main repository and pasting it in a new repository on your GitHub account.
So basically copying happens on the GitHub account (only) and you communicate with this newly created repository on your GitHub account from the locally running git.
Any change you do henceforth will update this new repository created on your GitHub account and the main repository (from which you forked) will remain unaffected.

CLONE

Cloning is copying the contents of the main repository on your local machine.
So basically copying happens between GitHub and your local machine over the network(internet) i.e. you communicate to the original remote branch from the git in your local machine.
Any change you do henceforth will update the main repository from which you took a clone.

Cloning via https vs ssh
We'll cover this on another post, but in short

Clone using https:

You can clone from any repository just by doing directly git clone <link of repository>

You will have to input your username and password every time you want to communicate with GitHub (remote).

Clone using ssh:

You will have to put your public ssh key in your git hub account and then clone by git clone <link of repository>

You don't have to input your username and password to communicate with remote (GitHub).

Scenario 2:

You are starting your own project, working on your local machine and want to create a GitHub repository of the same.

Step 1: git init <name of folder>

Go to your desired folder and type this command
What this will do is create a folder as specified and also create a .git sub-directory.
Basically it initializes your git repository locally.
.git directory contains all the information i.e. history, remote address, etc. about your repository on your local machine

git clone < > = git init < > + copy files from remote repository

Now you work on your files and save them as you do.

Step 2: git add . or git add <name of files>

What this command does is that it adds all your files to the staging area.
work/.git/index
Basically from here you can preview your commit i.e. add all the files you've modified to the commit or segregate the work into more accurate commits by adding file wise.

What is a staging area will be covered on another post but in short imagine it is an area where you can put only those files which you need in your commit out of all the files you've worked on.

Step 3: git commit -m <commit message>

What this command does is adds all your staged files into your repository as a commit (which has a unique hash to access) with a specific message for better understanding of anyone who looks at it
work/.git/objects
Basically here all your changes will be added to the local git repository along with all the other commits you've done before.

Again, we will go into detail in another post and will cover blobs and trees etc. this is a beginner level post.

Step 4: git push origin <branch name>

What this command does is push/copies your local repository onto the remote repository i.e. a network command.
Therefore all your files will be uploaded and stored to the remote server(GitHub, GitLabs, etc.) from your local machine with the help of the version control tool called Git.

Once you've pushed your changes and your friend or collaborator wants to update his/her local repository they can do one of the following:

git fetch --all
This command downloads all the data from remote repository into your local repository i.e. a network command
git pull origin <branch name>
This command downloads all the data from remote repository and tries to merge or overwrite the data in your working directory i.e. a network command

Here is a pictoral summary of everything I've said above

The Git Identity

Mayank Arya — Tue, 05 Nov 2019 12:09:50 +0000

What is Git?

Git is a tool.

Definition: Git is a distributed version-control system for tracking changes in source code during software development.
Wikipedia

What is Github?

Github is a platform.

Definition: GitHub is an American company that provides hosting for software development version control using.
WIkipedia

In my words(for my absolute beginner friends), Version Control process is the one which handles all the issues that can arise due to multiple people contributing on a single project.
No! It won't solve your bugs and errors but it makes the process seamless.

Let me paint a more easier to understand picture,

Imagine you and your friend get a college project.
You come up with a bifurcation of tasks between you two and start coding.

Now after weeks of hard work when you try to merge both the parts it throws an error, you solve one it throws another and another and so much to the point that.....(you know it!)
Even if you solve the merging of both parts, now you need someone to validate your code before going forward. You'll zip the folder and try all the platforms to send it to you senior(mentor).
Even if you succeed in sending, now this mentor has too many suggestions and you will find yourself in a never ending sequence of calls and screenshots, etc. to show what where and how it's bad.

This is just two contributors and see the frustrating problems. The intensity of these issues increases exponentially with the number of contributors and these solutions ability to solve your problem decreases as well.

This is where a version control system comes in to play.

You and your friend could have uploaded a main working copy in master branch.
Taken out your own branches and experimented on it leaving the working product untouched.
You could have periodically merged your bug free fully tested code in to the master branch and keep on adding new features in your own branch. And also could have asked that sweet senior(mentor) of yours (who agreed to help you) to keep checking the merge request code that you created.

Yeah yeah I know those who knew this or could understand this wouldn't have clicked on this post.
So to break it down for absolute beginners, friends read in any way you want, I promise the next 20 lines will give you an answer.

Git

It is basically a tool or a software which allows you to do version control and code sharing by providing all the beloved commands that you will see in upcoming posts.
It is the local part of version control process i.e. allows you to contribute from and on your local machine and just like any other software, it is also installed locally on your computer
Just like most of tools(softwares), it has a GUI as well as a CLI

GitHub

GitHub however is a platform.
It is a cloud based platform on which git(tool) is hosted.
It is the network or the remote part of version control process i.e. using git you can connect to this cloud and upload/download resource

this is why you can use the same git commands everywhere(git is used) like GitHub, GitLabs, etc.

We will discuss about the commands in next post.

How I filter my arrays.

Mayank Arya — Tue, 05 Nov 2019 08:28:07 +0000

Javascipt has a very active community and that provides developers with a plethora of options in when it comes to solving a simple problem.

Although I myself love to use libraries like lodash or underscore when it comes to iterating on arrays or objects. I suppose for a beginner being able to read and understand MDN docs is really really important to get that strong foundation.

MDN however has a tendency of being a tad bit technical, which may or may not intimidate beginner coders.

Anyways, this article is here to simplify or simply put forward a few of the everyday use-cases.

Filtering an array
So, keeping aside the libraries I'm going to show you a set of functions which you will help you filter an array in different ways and are supported natively by the language.

Find a value: Use array.find(callback) : It will stop and return the value as soon as the condition is satisfied.

Filter on the basis of a condition Use array.filter(callback) : It will iterate through the whole array and return a new array with only those elements which satisfy the condition.

filter can be used for find use-case but filter will iterate the whole array/list even if the first element was the only one that satisfied our condition

Find if atleast one element in list satisfies our condition Use array.some(callback) : It will stop and return a boolean value based on if the condition is satisfied (does not iterate the whole list).

some has its own use case because find will return you the value but if you just want to check, a boolean value is well better just to maintain a standard practice

Find if all the elements in list satisfy our condition Use array.every(callback) : It will iterate through the complete array and return a boolean according to the condition i.e. true if all elements satisfy our condition false if any one of the elements do not satisfy our condition

Examples of all the above written functions

for-in and for-of with arrays.

Mayank Arya — Tue, 05 Nov 2019 06:48:44 +0000

So in the beginning of my career I was working for a project where I had to deal with a lot of arrays and objects. Also there was a requirement of an asynchronous task within the loop!
On taking up the task I was like, "Eh, I'm going to complete this thing in no time and then watch an episode ;-)".

for () { await *db_call* }

But then as soon as I finished up writing my code, I tested it (just the response as I was too confident of the logic and implementation) and was surprised to see "undefined undefined undefined.....".

Now "How to do an asynchronous task in a loop?" is a separate post. Here I will talk about how I approached looping.

JavaScript has way too many methods to loop and doing asynchronous tasks within each one has a different level of difficulty but since this post is for beginners, the most basic loop is the for loop.
Yup, talking about the omnipresent for(var i = 0; i<limit; i++){}.
If we are talking about ES6, we also get very basic and easy to use (with easy to do async tasks facility) for-in and for-of loops.

What I learned is what I am going to share with you in the simplest way possible.

Syntax: for(let item in array){} -> item will hold index of arrays
Syntax: for(let item of array){} -> item will hold element of arrays

Therefore, we can also call them as:

for-in ->

for(let index in array) { // body }

for-of ->

for(let element of array) { // body }