DEV Community: Lakshya Singh

My Journey: Google Summer of Code

Lakshya Singh — Mon, 05 Jul 2021 13:54:22 +0000

What is GSoC?

Google Summer of Code is a global program focused on bringing more student developers into open source software development. Students work with an open-source organization on a 10-week programming project during their break from school.

This post highlights my journey of getting selected into the program from the very beginning. I believe that there is no defined path for getting selected in such open-source fellowships. Everyone has a unique journey, and you can take a few things from other journeys to write yours :) because the essence of each one is similar.

Now that I have your attention, let's get started. I will talk about my journey in two parts:

the initial Pre-GSoC part will cover how I came about making my first contribution in Open Source and developed my skills
the later part GSoC InFocus focuses on GSoC specific things like selecting an organization, contributing, writing a proposal, etc.

Pre-GSoC

This was a phase where I wasn't much worried about GSoC and focused on developing my skills, adding new tech stacks into my belt, developing more projects, and contributing to open source.

This phase is crucial because your zeal and fire to contribute and make a mark in the open-source community starts to rage, and doing some fuels that fire further.

How I came to know about GSoC?

The first time I heard about GSoC was in an event conducted by Club of Programmers IITBHU where I was introduced to open-source programs like GSoC, Outreachy, etc. and people who were previously selected shared their experience with us.

I wasn't sure whether I would someday dwell into the realm of Open Source as, at that time, I was more focused on Competitive Programming like most of my peers. But things changed after the programming Camp in the Winter of 2019, where I started with Web Dev, and now I was sure I want to be amongst the group of people who clear GSoC.

Then came the GSoC'20. Many of my seniors who applied got selected, and I thought that a first-year student could never clear GSoC ( that perception changed this year :) ), so I focused on improving my skills in Web Development and didn't bother applying in 2020.

Learning Phase

I was burning the midnight oil to make web development my forte be it backend or frontend, vue or react, Django or NodeJS... I wanted to know it all as there existed so many fascinating things for me to learn.

So here are some of the things I did to strengthen my skills in web development :

I utilized Frontend Masters to cover most front-end things like frameworks and Design. Also took a git course by @nnja
For Django, I started dwelling into the docs of Django and DRF to learn more advanced features after completing basic stuff from DjangoGirls
Then, I did some projects using what I have learned to combine both backend and frontend. I did invest quite some time in them, and it was fun.
Later on, when I came to know about things like NodeJS being faster and a more scalable DB such as MongoDB, I did a project using them in a Hackathon with my friends @Purushottam and @Madhava, which we won too 🥳

Apart from my own projects, I participated in projects of our Programming Club and also did an intern in a freelance project. These things prepared me to swiftly walk through a large codebase, collaborate on Github, use version control, apply my knowledge, etc.

Open Source Hacktoberfest

There couldn't be a better start for your open-source journey than HacktoberFest. It's an annual open-source event where project maintainers await your contributions, and they prepare their projects to accept new contributors.

Apart from contributing, you also get rewarded swags, tees, etc., by DigitalOcean and some of the projects. You can check out hacktoberfestswaglist during hacktoberfest to know about projects offering additional swags.

I outlined my hacktoberfest with my friend Kushal ahead of October. We decided to go good-first hunting, work on several issues and earn some swags. Who doesn't like swags, right? So I intended on completing the tasks to get those swags.

All of the projects were very welcoming. Even though I had no idea about the tech stack they were using, I contributed to them, but I focused on solving issues and asked many questions.

Some of my contributions which you can check out :

By the end of October, I was familiar with contributing to open source projects, interacting with communities, finding issues, making PRs, and working my way around good first issues.

GSoC InFocus

For most people, this phase is after and around December and January, where you start looking at organizations finding relevant and interesting projects to contribute to.

Selecting Organizations

I started looking at GSoC archives in January and probably would have gone through the whole A-Z list about 10-20 times. Earlier, they didn't have filters for the tech stack, but they have it now, and it really helps to select the organization.

First, I jotted down the list of organizations I want to contribute to based primarily on my interest in their past and current projects and those that didn't require me to learn something completely new ( biggest mistake '-' ).

One of the most useful tools I found when selecting my GSoC organization was developed by one of my seniors @nishantwrp . With all the statistics at hand, I can filter out organizations.

nishantwrp / gsoc-organizations

A site for viewing and analyzing the info of the organizations participating in Google Summer of Code.

GSoC Organizations

A site for viewing and analysing the info of the organizations participating in Google Summer of Code and filtering them by various factors like years of participation, categories, etc.

Tech Stack

Gatsby - Gatsby is the frontend framework used for developing this site.
Redoc - Redoc is used for generating api docs.

💫 Deployment Status

Main Site

API docs

🚀 Contributing

Contributions are most welcome in this project be it reporting an issue or sending a pull request.

Some of the things you could help with currently are -

Improving custom filters

The data displayed is scraped from the official GSoC Archive. There may be some errors in the data. To tackle that custom filters are applied on the data which are defined in api/filters. The filters can be improved a lot.

Example 1 - There may be duplicate organizations on the site which is due…

View on GitHub

The list, as you can see, consisted of around 30-40 organizations. So I started filtering them out based on:

Number of times org was selected for GSoC in past
The tech stack they were working on should align with what I know, things like Javascript, Python, NodeJS, Rest APIs, etc.
Number of students they select, which I filtered to be at least greater than or equal to 4.
Amount of people already contributing to them because eventually only a few students will be selected for summer.
Organizations using IRC as a means of communication were a big NO! for me.

In the end, I decided to go with HTTP-APIs. I started checking out their Contributing Guidelines, Resources to get started, and their repositories. I selected HTTP-APIs because REST APIs are my forte, and they were doing something pretty interesting.

I made a few contributions to their repos, upgraded their dependencies to support python v3.8 and updated Dockerfile.

Still, a few things that took me away from them were that the mentors weren't that responsive, and even though I went through all of their resources, I couldn't find something significant to contribute.

So I drifted away from HTTP-APIs, but at the back of my mind, it was still that I have to make it work there somehow.

Change of Plans

If you know me prior, you already know that I never went through with HTTP-APIs instead, it was Chapel. Chapel is a programming language designed for productive parallel computing at scale.

The story behind the finding of Chapel is something that you don't hear often. I was in a meeting with my peers, and we started talking about things we are doing, and GSoC became a part of the discussion.

My friend @Jatin stated to me that, and I quote, "there is this language where you can run statements simultaneously using a forall loop". He seemed pretty interested, and so sparked the idea of taking a look at Chapel.

It was also at the same time, i.e. February, I was talking with one of my seniors @Ashish, who previously got selected in GSoC under OSGeo. My primary concern was that HTTP-APIs didn't work, and if I go in places related to Web Development there, the amount of already active students is way more than I wish to compete with.

So the plan I made after discussing with Ashish was to contribute to something, not JS, not Python, but things constituting C++, C, or some new language. And since Chapel caught my interest, I started there.

It is hard to find a project where you have experience with all the technical tools, so in hindsight, it’s okay for you to select an organization where you have only 40% of the tech stack down. You might even end up working with the part of the software that uses a language you have zero familiarity with, like me.

Contributing to the project

The thing with all GSoC organizations is that they have excellent resources for you to get started with. This includes documentation, contributing guidelines, getting started with contributions, etc.

Just as HTTP-APIs, Chapel also had excellent resources for me to learn it, and I went straight for them started writing small scripts, learning the syntax incrementally.

The question you might have for me is why I decided to stick around with Chapel? The difference was chapel has so many issues ( over 2k ), and these are the ones made by the core team itself. That made it pretty clear that I can contribute a lot and the team is highly active in developing the project.

I was observant even when reading the documentation and talked in the gitter channel about how the documentation can be improved. I was also helping out by answering some of the questions in the channel.

Something that usually people forget about is interacting a being a part of the community. It's not just about coding your way around, and I made sure that I opened gitter every day to take a look at the ongoing discussion here as well as on Github Issues.

As chapel is a comparatively new language, I knew there could be scope for improvement on the implementation done in Modules. Also, at the time when I started contributing, I was pursuing courses on Algorithms and Operating System as part of my college curriculum.

So I went on to find the implementation of Quick Sort and Heap in the codebase, discussed few updates on them, and made a Pull Request.

After that, I started looking at existing issues, discussing how I should work them out, the idea of the core team about the issue, and eventually made the Pull Request for it to be reviewed.

The thing that kept me engaged in chapel was the quick response from mentors within a day or two. That made me feel that my contributions are very much appreciated.

Writing Proposal

It is expected for a proposal to contain a detailed explanation of your implementation and timeline. What gives you an edge is your contributions to the project until then. This helps solidify the trust in your abilities to finish the project.

Even though I had drifted away from Web Dev, it all came back when projects that were announced by Chapel had a project on Socket Library. This was something that I was targeting since it was announced even before organizations were announced.

Even though Chapel gave me a place to contribute to it was the project that kept me going because it's my niche and was something where I can apply all the knowledge I gathered over time.

I started working on my proposal after getting clarity on few things from my mentor on what were they expecting from the project. I also used to look out for questions that other people were asking related to my project.

I got up to speed on working with sockets in C, went through the design of the socket library in Python, gathered more information about non-blocking sockets, and finally designed my proposal.

I made sure to add in code snippets and mock implementation of how the code will be implemented in C and Chapel. It is also a good idea to add in diagrams which I did, because images speak more than text.

My organization mentors seemed happy with the design because they didn't seem to have much issue with what I had shown them in the draft.

But @Shivansh, one of my seniors I requested to review my proposal, told me that it was less technical and needed more of it. This pushed me to improve my proposal further, add more details about the implementation, add in diagrams and code snippets.

You can find mine and several other accepted proposals in this repository. Courtesy of Club of Programmers IIT BHU

COPS-IITBHU / GSoC-Accepted-Proposals

This repository serves as an archive of GSoC - Google Summer of Code accepted proposals of IIT (BHU), Varanasi students.

GSoC Accepted Proposals: 2019-2024

This repository serves as an archive of GSoC - Google Summer of Code accepted proposals of IIT (BHU), Varanasi students. GSoC is an Free and Open Source programme and COPS IIT (BHU) highly encourages the students to contribute to Open Source.

2019

Shivansh Saini - VideoLAN

2020

2021

View on GitHub

Post Proposal Submission

Going inactive after proposal submission shows that you aren't interested in the community, and you were doing it just for namesake.

I ensured that after proposal submission, I kept contributing and was active not that much but still had my presence in the channel. I wrote in my proposal that I would get all my pending PRs merged, and that's what I did.

Fast forward to 17th May, I was in a voice call when the result came out, and I literally shouted woohoo!

Final thoughts

GSoC is a non-competitive (after getting selected, of course 😏) program so try to cherish the community alongside it. Find your motivation; why do you even want to do it first, and the rest will follow.

GSoC is not an internship and should not be looked at as a way to earn money. It is definitely not something you should pursue half-heartedly or just for the sake of it, nor it would help you neither the community, and there can be better ways for you than open-source.

I am learning a lot from my mentors and fellow GSoC mentees. The community is something I will definitely enjoy and use my summer to learn from them and, as I say, make Chapel go to Web.

Thanks for reading :) and please share your thoughts. I always like to meet more enthusiastic people, so do reach out to me on Twitter or Linkedin to share your feedback or for any queries. I'd be more than happy to help and connect.

Dynamic Classes and Styles

Lakshya Singh — Wed, 23 Jun 2021 08:31:45 +0000

In this article, I aim to provide a not so new but also not so known way of adding dynamic features into your application, ensuring that you can achieve what you wish to simply without writing boilerplate code and meddling with string concatenation.

When writing Dynamic UI Components that respond to user actions and events, we require methods to respond to these events by translating them into our DOM. Change in DOM is usually achieved by changing styles and classes based on certain reactive data that we have in our javascript.

While we can certainly do string concatenation, calculate a string and then bind a string to class or style... this method is error-prone and cumbersome at times to deal with. That's where Vue.js's clean suite of enhancements come into vue ( french for 'view' )

Quick Recap Data Binding

If you aren't familiar with what data binding is....it's essentially binding any attribute of an element in your template to the data available in your script tag, which can be props, data or computed properties.

Data binding is one of the most elegant features of Vue.js because it provides reactive data binding with a straightforward syntax using v-bind.

<div 
  v-bind:class="dynamicClass"
>Hello World!
</div>

A shorthand for data binding is but just using : and then the attribute name, which I guess anyone would prefer using more.

<div 
  :class="dynamicClass"
>Hello World!
</div>

Let's suppose that the above class is not a once initialized and stays the same kind of class it changes based on user input, so we have to use a computed property or watch to make changes to our dynamicClass variable. So things will start to look like this.

export default {
  data( ) {
    return {
      changingBoolean: false
    }
  },
  computed: {
    dynamicClass: ( ) => changingBoolean : 'text-center text-lg' ? 'text-justify text-xl'
  }
}

Looking at the code above we can see that for a simple switch in classes based on a variable we had to write so much code. So simply creating a dynamic class won't work.

Array Syntax for Classes

Enter array syntax which makes the previous task less cumbersome and also keeps it DRY at times when needed.

<article 
  :class="[changingBoolean : ? 'text-center' : 'text-justify']"
>
    Hello World!
</aside>

This looks so much cleaner than the previous method right ≧◠‿◠≦✌. But it's an array so we can add multiple values into it too :). Now we can toggle the text alignment class while flex and width will always be present.

<article 
  :class="[changingBoolean : ? 'text-center' : 'text-justify', 'flex w-2']"
>
    Hello World!
</aside>

Object Syntax for Classes

Sometimes we just want to add toggle a single class on/off when a boolean is true and nothing when it's false. Using ternary operator it will look as below

:class = [changingBoolean : ? 'text-center' : ' ', 'flex w-2']

We can do better, enter object syntax because eventually, everything is an object in javascript so why not.

:class = [ { 'text-center' : changingBoolean }, 'flex w-2']

You can also bind an object directly to class instead of keeping it inside an array and it also supports multiple togglable classes just like an array.

<article
  class="absolute"
  :class="{ active: isActive, 'text-xl': largeText }"
></article>

active is a simple string variable for class whereas isActive and largeText are boolean variables. Also if you noticed class and :class can simultaneously exist on a single element ツ

Passing in Objects

We can also pass in reactive array/object stored in our data or computed to classes. This can be a more powerful pattern at times when you have to do multiple checks and toggling which when accommodated into HTML won't look good and readable.

<nav :class="classObject"></nav>

Modifying Child Classes

Suppose we have a nice and shiny icon element we have specified several classes to it which works for most cases so we didn't bother making it a prop. But a time came when we had to change its colour in that case we want to pass down a new class to our child.

<my-icon
  :class="text-blue-600"
/>

Now the :class will be appended at the end of the class inside of our component's parent. We can obviously also provide in a simple class too.

Array and Object Syntax for Styles

The array and object syntax for classes and style looks exactly identical except for a very minor change. It's not about the truthiness of variables anymore it's about assigning them to the right CSS property.

<nav 
:style="{ marginTop: marginTop + 'px', backgroundColor: infoColor }"
>Doge Coin
</nav>

In the above example, we are assigning the color property a dynamic value and a similar operation for fontSize.

We can write properties as kebab case too just ensure to wrap them in quotes
It can be more powerful to directly pass in an object to style which is a more readable and cleaner method.

The purpose for array syntax in style reduces to allowing us to pass in multiple objects ( Duhhh that's what arrays do right :P ) for style as passing a string to style works won't make much sense in the special syntax.

<nav 
:style="[marginObject, backgroundObject]"
>Doge Coin
</nav>

Bonus Treats

Some CSS properties require us to use vendor prefixes. Vue will apply them for us implicitly but if you want to be explicit you can pass in multiple values for a single property through object syntax and providing an array of values. Vue will only render the last value in the array which the browser supports.

<ul :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></ul>

Thanks for reading! :). Please share your thoughts about the array and object syntax would you prefer them over strings?

Reach out to me on Twitter to share your feedback or for any queries. I'd be more than happy to help!

Comprehensive Guide for not so Regular Expressions

Lakshya Singh — Sun, 16 May 2021 17:47:21 +0000

What is Regex?

Regular expressions ( or regexes, or regex patterns) are essentially a kind of formal grammar/syntax used to find the set of possible strings that you want to match.

At first, REs can look pretty scary and daunting, but we can write highly efficient matching patterns in terms of length and speed after understanding even a few special characters.

We can use REs to save the day in a variety of use cases :

Checking a pattern in string
Splitting into strings
Replacing part of strings
Matching a complete string
Cleaning raw data in Natural Language Processing

All major programming languages and even IDEs have their own standard module for regex where the syntax might change, but the underlying concept remains the same.

# python3
import re

pattern = re.compile("doge\\shen+lo+",re.I)
if pattern.match("Doge hennnloo") is not None:
  print("Henlo Doge")

// javascript
const pattern = /doge\shen+lo+/i
if (pattern.test("Doge hennnloo")) {
  console.log("Henlo Doge")
}

Let's get started 🚀

Normal Characters 🇦

You can use regex as you use normal strings/characters for matching too :

console.debug(/king-11/.test('king-11')) // returns true

But certain special characters have to be escaped because they carry special meaning in regex.

\ / [ ] { } . ? + * ^ $ | ( )

// we have to escape back slash in string to be tested as well
console.debug(/\\\/\[\]\{\}\.\?\+\*\^\$\|\(\)/.test('\\/[]{}.?+*^$|()'))
// returns true

Character Class and Regex Characters 🧑🏼‍🤝‍🧑🏼

A character class allows you to define a set of characters from which a match is considered if any of the characters match.

/[aeiou]/.test('e') // returns true
/[aeiou]/.test('c') // returns false

You can also provide range values to regex for defining character classes using -.

/[a-z]/.test('l') // returns true matches all lowercase alphabets
/[A-Z]/.test('L') // returns true matches all uppercase alphabets
/[0-9]/.test('8') // returns true matches all digits from 0 to 9
/[0-5]/.test('8') // returns false matches all digits from 0 to 5

But if you want to match -, you have to escape it or keep it at the start or end of character class, i.e. [].

/[0\-5]/.test('-') 
// returns true matches 0, 5, -
/[-0-5]/.test('-') 
// returns true matches digits from 0 to 5 and -

We can define complement character class, i.e. characters we don't want to match, by adding ^ at the start of our class.

/[^a-z]/.test('A') 
// returns true doesn't match any lowercase alphabet

Inside a character class, only two characters carry special meaning - in-between characters and ^ at the start of the class rest all other characters don't carry their special meaning; hence we don't need to escape them.

/[$+]/.test('$') // returns true matches $ and +

You can define character classes for things like alphabets and digits but regex makes it easier for you by defining several special regex characters:

\w [a-zA-Z0-9_] Alphabets and Digits Class
\W [^a-zA-Z0-9_] Negated Class of \w
\d [0-9] Digits Class
\D [^0-9] Negated Class of \d
\t Tab Character
\n Newline Character
\s [ \t\r\f\v\n] Matches all white space characters like space, tab, newline, carriage return, vertical tab, form feed, etc.
\S [^\s]
\b Matches Word Boundary where there is a \w on one side and \W on other side of position
\B [^\b] Matches all non Word Boundaries

Wild 🐯 Cards

^ symbol allows us to match the starting of the string
$ allows you to match the end of the string
. allows us to match any character

console.log("Tall".match(/l$/ig))
// [ 'l' ]
console.log("Tight".match(/^t/ig))
// [ 'T' ]

In the above example, while l was matched only with the last one, whereas T was matched with the first one due to $ and ^, respectively. Without $ as you can see, all the ls were matched.

regex = re.compile("ho.dog")

print(regex.search("hotdog") is not None)
# True
print(regex.search("hoddog") is not None)
# True

. allowed us to match both d and t in the above example. All the three wildcards are special characters to match them specifically, i.e. ^, $ and . you have to escape them using \.

Flags 🎌

You might have observed usage of g or i after the regex expression so what are these things?
These are regex flags that affect the number and type of match we want to make :

i - Case insensitive match which doesn't differentiate t and T
g - Global Flag allows us to match more than one instance of our expression and not just the first instance
m - Multiline Flag affects the behaviour of ^ and $ where a \n newline character would mean the start of a new string

  import re
  print(re.search("^football","rugby\nfootball",re.I|re.M))
  # <re.Match object; span=(6, 14), match='football'>
  print(re.search("^football","rugby\nfootball",re.I))
  # None

s - DotAll Mode, allows wildcard . to match newline character as well.
u - Unicode support enabled

Half Way through, but I believe the next half will be easier

Quantifiers 3️⃣

Sometimes we require to match a character class, character, group ( coming up ) zero, one, more than one or even, let's say 11-22 times ( random numbers ); in such cases, quantifiers come to the rescue:

? Matches its preceding character, class or group zero or one time.

  regex = re.compile("hot?dog")

  print(regex.search("hotdog") is not None)
  # True
  print(regex.search("hodog") is not None)
  # True

* Matches its preceding character, class or group zero or more times ( ∞ ).

  regex = re.compile("hot*dog")

  print(regex.search("hotttttdog") is not None)
  # True
  print(regex.search("hodog") is not None)
  # True
  print(regex.search("hotog") is not None)
  # True

+ Matches its preceding character, class or group one or more times ( ∞ ).

  regex = re.compile("hot+dog")

  print(regex.search("hotttttdog") is not None)
  # True
  print(regex.search("hodog") is not None)
  # False
  print(regex.search("hotog") is not None)
  # True

{n,m} Matches its preceding character at least n times and at most m times. The default value for n is 0 and the default for m is ∞

  regex = re.compile("hot{1,3}dog")

  print(regex.search("hotdog") is not None)
  # True
  print(regex.search("hottttdog") is not None)
  # False
  print(regex.search("hotttog") is not None)
  # True

Groups ✨

Groups allow us to create grouped expressions that can help us in substitution, referencing them in later parts of a regular expression.

Let's say we want to replace all the function with arrow functions. Obviously, we would like to retain the name of the function and its arguments, but we need to reference them in replacement. With VSCode, our favourite editor and regex, we can do something like :

function NotAnArrow(argument) {
  console.log("I do something")
}

const NotAnArrow = (argument) => {
  console.log("I do something")
}

What we used were capturing groups, which we created using (.+) and (.*) ( arguments might not be there ). Anything inside those brackets forms our group, and the expression inside them is the one that will be matched.

There are other types of groups as well:

Named Groups (?<Name>...) is a group that provides us reference to that group using its name instead of numbers
Non Capturing Groups (?:...) is a group that will match, but we can't reference them in the result of the regex expression.

Alternation `|`

Alternation is a simple OR that we can use between different parts of our regex pattern to match this or that or even that by providing different options, just like radio buttons.

const regex = /(java|type)(?:script)?|html5?|css3?|php|c(\+\+)?\s/gi

for (let x of `JavaScript is here but PhP came
before them and now its TypeScript`.matchAll(regex)) {
  console.log(x)
}
// [ 'TypeScript', 'Type', index: 56, input: 'JavaScript is ..... ]
// .
// .

So here is what we did with that complex-looking but now easy for you to understand Regular Expression.

Created Group to match both Java, Javascript and Typescript using | and ?
Used | to match other languages as well
Escaped + to match for C++ and C as well using ?
Finally, a character class \s to signify the end of the language name
Flags like gi to match all languages and irrespective of case

Usually, you will find yourself using | inside of groups as you wouldn't want to pollute your global regex just like you always use virtual environment. Make sure to make them non capturing if you don't want to reference or find them in your results.

Trick 🎃 Treat

+ and * are of nature greedy. They will keep adding characters to the match until they find the last instance of any succeeding expression or the sentence ends.

import re
regex = re.compile("(a|m).+e")
print(regex.match("apple maple"))
# expected ['apple','maple'] found 'apple maple'

Here .+ ignored the e of apple and went all the way to finish at e of maple as it was the last instance of e that it was able to find.

Lazy Mode for * and + can be activated by appending ? after the quantifier matches only the minimum required characters for the regex expression.

const regex = /(?:a|m).+?e/gi

for (let x of "apple mapple".matchAll(regex)) {
  console.log(x);
}
// expected ['apple','maple'] found ['apple' 'maple']

I highly recommend you to check language-specific docs for syntax and available features. One of the best docs for regex is for python.

I didn't cover one feature that I might make a new article on it is Lookahead and Lookbehind. You can wait :) or check out the link.

Why did I say that? Because sometimes regex can take exponential time to search a be really catastrophic. So .....

May the code be with you 🖖

Good Git Commits

Lakshya Singh — Fri, 07 May 2021 09:37:29 +0000

Git commits are everywhere, and you might be generating more than 1k commits over a year. So it becomes crucial to understand that commit should be structured and created in a scalable manner.

Why bother?

Writing better commits can make the difference between your debugging session lasting 1 hour to a few minutes.
With good commits, it's easier for anyone to understand the progress of a project and get up to speed.
It also allows reviewers to understand your progress during the resolution of an issue clearly.
Generating good commits will allow you to track back changes/issues to a specific module/file and associate it to the code easily.
They enable you to understand how the issue crept in the codebase and how you can easily resolve it.
Good commit messages can save you the hassle while creating release notes

What are good commits?

Modular

A commit should be modular in nature, just like our codebase. Each commit should encapsulate a single logical idea only that might span over several changes but as a whole is a single related group of changes.

E.g., add CSS to a component, change the margin of all pages, strong typing your functions, etc.

Type of Commit

Categorising your commits into types will clarify what type of change it made and be instantly identified. I usually keep a template file that contains those types, so I don't have to remember them :P

Some of the subtypes can be a chore, feat, fix, refactor, style, etc. What meaning does each carry can vary based on your team or you as an individual as well. Below are the types that I use in my commits :

feat: new feature
fix: bug fix
refactor: refactoring production code
style: formatting, missing semicolons, etc.; no code change
docs: changes to documentation
test: adding or refactoring tests no production code change
chore: updating dependencies etc. no production code change

Description

A commit message except for the subject line limited to 50 chars should include a description broken into 72 char lines/line. The description is separated from the subject by a blank line. The description should try to cover things like :

the current behaviour,
what change are you making?
why this fix is needed?
why take the current approach for this change?

Commit message should be in the future tense, i.e. 'Fix' vs 'Fixed.'

Bonus Treats

You can specify a template for your git commits by adding the following config to your $HOME/.gitconfig

[commit]
    template = ~/path/to/template

My template looks like this, which allows constraining the number of characters in the subject and description line. I also add the types and just in case I don't remember :'(

# <type>: <subject>
##### Subject 50 characters ################# -> |


# Body Message
######## Body 72 characters ####################################### -> |

# --- COMMIT END ---
# Type can be
#   feat    : new feature
#   fix     : bug fix
#   refactor: refactoring production code
#   style   : formatting, missing semi colons, etc; no code change
#   docs    : changes to documentation
#   test    : adding or refactoring tests
#             no production code change
#   chore   : updating grunt tasks etc
#             no production code change

Note: For your template to be prompted, you have to use git commit.

This is my first post hope you liked it =)

DEV Community: Lakshya Singh

My Journey: Google Summer of Code

What is GSoC?

Pre-GSoC

How I came to know about GSoC?

Learning Phase

Open Source Hacktoberfest

GSoC InFocus

Selecting Organizations

nishantwrp / gsoc-organizations

A site for viewing and analyzing the info of the organizations participating in Google Summer of Code.

GSoC Organizations

Tech Stack

💫 Deployment Status

Main Site

API docs

🚀 Contributing

Change of Plans

Contributing to the project

Writing Proposal

COPS-IITBHU / GSoC-Accepted-Proposals

This repository serves as an archive of GSoC - Google Summer of Code accepted proposals of IIT (BHU), Varanasi students.

GSoC Accepted Proposals: 2019-2024

2019

2020

2021

Post Proposal Submission

Final thoughts

Dynamic Classes and Styles

Quick Recap Data Binding

Array Syntax for Classes

Object Syntax for Classes

Passing in Objects

Modifying Child Classes

Array and Object Syntax for Styles

Bonus Treats

Comprehensive Guide for not so Regular Expressions

What is Regex?

Let's get started 🚀

Normal Characters 🇦

Character Class and Regex Characters 🧑🏼‍🤝‍🧑🏼

Wild 🐯 Cards

Flags 🎌

Quantifiers 3️⃣

Groups ✨

Alternation |

Trick 🎃 Treat

Good Git Commits

Why bother?

What are good commits?

Modular

Type of Commit

Description

Bonus Treats

Alternation `|`