Skip to content

Commit d4d17e3

Browse files
committed
Write artile about git naming conventions
1 parent 5a0cadc commit d4d17e3

File tree

9 files changed

+133
-2
lines changed

9 files changed

+133
-2
lines changed
14.8 KB
Binary file not shown.

Diff for: src/assets/images/content/blog/4/gitmoji.png

17.7 KB
Loading

Diff for: src/assets/images/content/blog/4/gitmoji.webp

12.2 KB
Binary file not shown.

Diff for: src/assets/images/content/blog/4/thumbnail.pdn

355 KB
Binary file not shown.

Diff for: src/assets/images/content/blog/4/thumbnail.webp

25.9 KB
Binary file not shown.

Diff for: src/assets/state/articles/4.jsx

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { people } from "../team";
2+
import tags from "./tags";
3+
4+
import thumbnail from "@blogImages/4/thumbnail.webp";
5+
import gitmoji from "@blogImages/4/gitmoji.webp";
6+
import conventionalcommits from "@blogImages/4/conventionalcommits.webp";
7+
import logo from "@/assets/images/brand/logo.svg";
8+
9+
import A from "@/components/pages/blog/post/ArticleComponents";
10+
11+
/** @type {import("./article").default} */
12+
export default {
13+
title: "Exploring Git Commit Naming Standards",
14+
15+
thumbnail,
16+
thumbnailAlt: "Anatomy of a Commit Message",
17+
18+
vertical: "software",
19+
20+
slug: "git-commit-naming",
21+
22+
tags: [
23+
tags.git,
24+
tags.tutorial,
25+
tags.discover,
26+
],
27+
28+
author: people.rik,
29+
30+
created: new Date("2023/06/12"),
31+
32+
teaser: "Explore the world of Git commit naming standards and learn how to choose the right one for your project",
33+
34+
content: <>
35+
<p>
36+
Personally, I must admit that I haven't always adhered to naming conventions when making Git commits. However, I've come to realize the tremendous benefits they offer, especially when working in teams. Recently, while working on Commit Rocket, I found myself seeking a structured approach to commit naming.
37+
</p>
38+
<p>
39+
That is why I am writing this article! I would like to find out what makes a great commit message and which standards there are. Also most importantly for me, which approach I could implement in Commit Rocket. I hope to take you along and teach you what I've learned.
40+
</p>
41+
<A.H2>Benefits of Naming Conventions</A.H2>
42+
<p>
43+
From my own experience, I've found that having a structured way to name commits significantly reduces the stress and uncertainty associated with creating commit messages. When you can clearly express the purpose and impact of your changes in a concise manner, it becomes easier to navigate and understand the commit history. It also helps when you need to locate a specific commit later on, whether to review the changes or revert them if needed.
44+
</p>
45+
<A.H3>Anatomy of a Commit Message</A.H3>
46+
<p>
47+
As you can see, a commit message is meant to convey some sort of meaning. Having standardized ways to write these messages means that everyone will be on the same page.
48+
</p>
49+
<A.H4>Imperative Mood</A.H4>
50+
<p>
51+
It's important to use the imperative mood, which provides a clear instruction about what the commit does. Instead of saying "I added feature XYZ," it should be "Add feature XYZ." This small change in phrasing makes a big difference in creating a consistent and actionable commit history.
52+
</p>
53+
<A.H4>Detail and Explanation</A.H4>
54+
<p>
55+
Commit messages should be detailed enough to convey the purpose and context of the changes. When writing commit messages ask yourself why the changes were made, what the context is of the changes and what effect it will have.
56+
</p>
57+
<p>
58+
While a short one-liner can work in some cases, using multi-paragraph messages can provide a more in-depth explanation, especially for complex or significant changes. If you're using the Git command-line interface, you can achieve this by adding an extra `-m` flag to the commit command. Here is an example:
59+
</p>
60+
<A.Code lang="bash">
61+
git commit -m "Fix bug where users could switch to light mode" -m "Users were able to switch to light mode because the settings data loaded from the LocalStorage was not validated"
62+
</A.Code>
63+
<A.H4>Length and Content</A.H4>
64+
<p>
65+
The length of a commit message is also important. Aim for around 50 to 75 characters to keep it concise and readable. Avoid using filler words or unnecessary details like "I think" or "maybe." Instead, focus on conveying the essence of the change in a clear and straightforward manner.
66+
</p>
67+
<A.H2>Popular Naming Conventions</A.H2>
68+
<p>
69+
There are several widely adopted naming conventions that can serve as helpful guidelines for crafting effective commit messages. Here are two popular options:
70+
</p>
71+
<A.H3><A.Link href="https://www.conventionalcommits.org/en/v1.0.0/" title="conventionalcommits.org" nofollow external>Conventional Commits</A.Link></A.H3>
72+
<div className="flex items-center gap-4 flex-col md:flex-row">
73+
<img
74+
className="rounded-2xl max-h-24 w-auto border border-neutral-500"
75+
src={conventionalcommits.src}
76+
width={conventionalcommits.width}
77+
height={conventionalcommits.height}
78+
/>
79+
<p>
80+
This convention provides a structured format for commit messages, including optional scopes, a description, body, and footer(s). For example:
81+
</p>
82+
</div>
83+
<A.Code lang="bash">{`
84+
feat(user-profile): Add avatar image upload functionality
85+
[optional body]
86+
[optional footer(s)]
87+
`}</A.Code>
88+
<p>
89+
Conventional Commits offer an easy-to-understand and versatile format that can be quickly adopted and applied to your projects.
90+
</p>
91+
<A.H3><A.Link href="https://gitmoji.dev/" title="gitmoji.dev" nofollow external>Gitmoji</A.Link></A.H3>
92+
<div className="flex items-center gap-4 flex-col md:flex-row">
93+
<img
94+
className="rounded-2xl max-h-24 w-auto border border-neutral-500"
95+
src={gitmoji.src}
96+
width={gitmoji.width}
97+
height={gitmoji.height}
98+
/>
99+
<p>
100+
Gitmoji introduces emojis to commit messages, giving them a visually appealing touch. It follows a format that includes an intention, an optional scope, and a message. For example:
101+
</p>
102+
</div>
103+
<A.Code lang="bash">
104+
🐛 Fix issue with form validation
105+
</A.Code>
106+
<p>
107+
While Gitmoji brings a fun and expressive aspect to commit messages, it may take some time to get used to its unique set of emojis and their meanings.
108+
</p>
109+
<A.H2>Conclusion</A.H2>
110+
<div className="flex items-center gap-4">
111+
<p>
112+
The Commit Rocket repository will likely be making use of Gitmoji. It will take some getting used to for people, but I think it is a neat and clean way to express code changes. I also think that adding a visual aspect to commits is a fun idea. Maybe adding template commit names to Commit Rocket will be helpful 🤔.
113+
</p>
114+
<img
115+
className="w-24 h-24 aspect-square rotate-30"
116+
{...logo}
117+
/>
118+
</div>
119+
<p>
120+
Remember, commit naming conventions are just tools to help us communicate effectively and collaborate smoothly within our projects. While there are various conventions to choose from, the most important thing is to adopt one that works well for you and your team.
121+
</p>
122+
</>
123+
};

Diff for: src/assets/state/articles/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import IArticle from "./article";
33
import article1 from "./1";
44
import article2 from "./2";
55
import article3 from "./3";
6+
import article4 from "./4";
67

78
export default [
89
{
@@ -16,5 +17,9 @@ export default [
1617
{
1718
filename: "3",
1819
article: article3
20+
},
21+
{
22+
filename: "4",
23+
article: article4
1924
}
2025
] as { filename: string; article: IArticle }[];

Diff for: src/assets/state/articles/tags.ts

+3
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,8 @@ export default {
2121
},
2222
"plans": {
2323
name: "Plans"
24+
},
25+
"discover": {
26+
name: "Discover"
2427
}
2528
} satisfies Record<string, ITag>;

Diff for: src/pages/blog/[pid]/[slug].tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article: { author, tags, thumbn
6565
...tags.map((t) => t.name)
6666
]} />
6767
</Head>
68-
<main>
69-
<article aria-describedby="article-title" className="flex flex-col gap-8 max-w-4xl w-full items-center">
68+
<main className="w-full max-w-4xl">
69+
<article aria-describedby="article-title" className="flex flex-col gap-8 w-full items-center">
7070
<section aria-label="Main article content" className="flex flex-col gap-8 w-full items-center">
7171
<img
7272
aria-label="Article Thumbnail"

0 commit comments

Comments
 (0)