DEV Community

Cover image for ๐ŸŽฏ The Art of Writing Awesome Commit Messages: Why It Matters and How to Nail It
Hadil Ben Abdallah
Hadil Ben Abdallah

Posted on

๐ŸŽฏ The Art of Writing Awesome Commit Messages: Why It Matters and How to Nail It

Hey there, code warrior! ๐Ÿ’ป๐Ÿ‘ฉโ€๐Ÿ’ป

We all know the feeling. You're in the zone, slinging code like a boss, and you hit that beautiful moment when everything works. Time to commit! But wait, what do you type in that commit message box? ๐Ÿค” "Fix stuff?" ๐Ÿ˜… Or maybe "asdfasdf?"

Let's put those bad habits to rest and talk about writing commit messages that will make your future self (and your teammates) ๐Ÿ’ฏ grateful!

Why Bother with Commit Messages? ๐Ÿคทโ€โ™€๏ธ

Well, imagine reading a novel where all the chapter titles were "Chapter 1", "Chapter 2", and so on... Yikes! That's how your git history feels when your commit messages are vague, random, or worse, nonexistent.

A good commit message is like a breadcrumb trail ๐Ÿฅ– for your code, showing why things happened and what was done. It makes it easier to:

  • ๐Ÿ•ต๏ธโ€โ™‚๏ธ Find the cause of bugs
  • ๐Ÿงน Clean up or refactor without losing your mind
  • ๐Ÿค Collaborate effectively with other devs (they will love you for it!)

Good Commit Messages vs. Bad Ones ๐Ÿคก vs. ๐Ÿ†

The Bad Examples:

  • "fix" โ€” Hmmm, what did you fix? A bug? The alignment of a button? The Wi-Fi?
  • "bug fix 2323" โ€” Cool, but what bug? ๐Ÿ˜ต
  • "asdfasdf" โ€” We're calling the git police. ๐Ÿšจ

The Good Example:

  • "Fix the navbar not displaying correctly on mobile devices" โ€” Perfect! It's clear, concise, and to the point. Your team will understand what changed instantly. ๐Ÿ™Œ

The Anatomy of a Great Commit Message ๐Ÿง 

A good commit message is like a tweet: short, sweet, and informative! Here's a quick guide:

1. Start with an Action Verb

Keep it in the present tense (e.g., Add, Fix, Update).

  • โœ… Add new feature to handle payment processing
  • โœ… Fix broken link on homepage

2. Keep it Under 50 Characters

This is your subject line, so make it snappy!

  • โŒ Fix bug where user was unable to login when they clicked the login button, even though it was pretty obvious it should have worked...
  • โœ… Fix login button issue

3. Optionally Add a Description

For complex commits, add a line or two explaining the why behind the change.

Fix payment gateway integration.

The previous implementation was causing timeout issues on high-traffic days.
Enter fullscreen mode Exit fullscreen mode

4. Use Emojis to Lighten the Mood! ๐ŸŽ‰

Emojis aren't just for Slack! You can throw them into commit messages to add clarity and fun.

  • โœจ Add animation to the hero section
  • ๐Ÿ› Fix typo in user registration flow
  • ๐Ÿ”ง Refactor code to improve readability

Examples to Inspire You ๐Ÿ’ก

  • "๐Ÿ› Fix bug where users couldn't log in after a password reset"
  • "๐ŸŽจ Update styles for better contrast in dark mode"
  • "๐Ÿ”ฅ Remove deprecated API calls"

The emojis are optional (but fun!), and the message itself tells the full story. You don't have to ask "What did this do?" It's right there!

When NOT to Use Emojis โš ๏ธ

While emojis are cool, don't go overboard. If your commit history looks like a string of hieroglyphs, future you might not be so thrilled. Balance is key. Keep it readable! ๐Ÿค“

Final Tips for Commit Message Success ๐Ÿ’ช

  • Commit often: Small, focused commits are better than giant monoliths of code
  • Be clear, not clever: Sure, witty commit messages are fun, but clarity always wins
  • Keep it relevant: Don't throw in unrelated changes. One commit = one purpose

Your Commit Message Template ๐Ÿ“

Here's a cheat sheet for you to follow:

# <Type of change>: Short summary (max 50 characters)
# 
# Optional body:
# - Explain the "why" behind the change
# - Include references to issues or tickets if relevant
# - Keep each line within 72 characters
Enter fullscreen mode Exit fullscreen mode

Example:

๐Ÿ› Fix login bug on mobile devices

The login button was unresponsive on iOS devices due to incorrect 
event handling. This commit fixes the issue by using native click events.
Enter fullscreen mode Exit fullscreen mode

Wrap-Up ๐ŸŽ

Remember, writing good commit messages is more than just a courtesy; it's an investment in your project's future. Your team will appreciate it, and you'll thank yourself when you revisit old code.

So, the next time you commit, take a deep breath ๐Ÿ˜ค, follow these tips, and make that commit message count! ๐Ÿš€

Happy coding ๐Ÿ’ป

Thanks for reading!

Made with ๐Ÿ’™ by Hadil Ben Abdallah.

GitHub LinkedIn CodePen Daily.dev X

Top comments (4)

Collapse
 
giulianobortolassi profile image
Giuliano Bortolassi

Nice advice! I am just a little bit skeptical about emojis. Most modern clients might be a le to proper render it ( if you have a emoji aware font installed).

But I am not sure how it can impact automated ci pipelines if these tools depend on commit messages, or even how it would render if you are using a terminal on a server without any "Fira Code" like font installed.

I personally avoid emotes in the commit messages.

But thanks for the article

Collapse
 
hadil profile image
Hadil Ben Abdallah

Thanks for your thoughtful comment! ๐Ÿ˜Š I totally get your skepticism about emojis in commit messages, and it's a valid point. Emojis can indeed be tricky in environments where rendering support isn't guaranteed, like in certain CI pipelines or terminals without emoji-aware fonts.

In those cases, Iโ€™d agree that itโ€™s safer to stick to plain text, especially if there's a chance it might disrupt any automated tooling or lead to confusion in environments that donโ€™t render them properly.

That being said, I think it really depends on the team and the project. For more casual or internal projects, emojis can add a fun and quick visual cue to commit messages. But for serious production code where consistency across different systems matters, avoiding emojis is definitely the safer bet. ๐Ÿ”

As @lancemdev said, you can get your emojis from gitmoji, so you don't be confused which emoji to choose in your message.

Thanks again for your feedback, and Iโ€™m glad you found the article helpful! ๐Ÿ‘

Collapse
 
lancemdev profile image
Lance Munyao

Nice article.

You can get your git emojis from gitmoji btw

Collapse
 
hadil profile image
Hadil Ben Abdallah

Thank you so much. So glad that you like it ๐Ÿ˜