Stories by Victor Hamzat on Medium


<figure><img alt="" src="https://cdn-images-1.medium.com/max/439/1*bLtPTIsKUeAQHPo2eGrKpw.png"><figcaption>a graph of git commit messages against time(<a href="https://xkcd.com/1296/">XKCD</a>)</figcaption></figure><p>When I learned to code, I always believed that commit messages were the center stage for me to discuss all I did in my code. I usually include even the minute details; it sometimes goes like this: “I added a hover effect and padding to the buttons and centered them on the screen.” Some other times I would be in a rush and give the shortest git commits, for example, “Fixed button.” This might look harmless until you check your code months later and wonder what you meant by the commit. So the question is: what makes a good commit message?</p>
<h3>Writing a Git Commit message</h3>
<p>Let’s start: how do you make a Git commit? You can write a Git commit message with the following code:</p>
<pre>git commit -m "a descriptive message"</pre>
<p>that’s not all You can also add a body or description.</p>
<pre>git commit -m "a title" -m "a body"</pre>
<p>Writing multi-line commit messages might be difficult with the second -m flag. It would be better to edit your commit messages in an editor; that is what git commit command is for. It opens a COMMIT_EDITMSG window in your editor (by default, it uses VIM; you check <a href="https://levelup.gitconnected.com/how-to-configure-git-to-use-vs-code-as-the-default-text-editor-ea3670ab525a">here</a> to change to VS Code) where you can edit your commit messages.</p>
<p>Now, let’s get back to the initial question: what makes a good commit message?</p>
<h3>Rules for writing good commit messages</h3>
<h4><strong>Tone</strong></h4>
<p>You should use an imperative tone, just like you’re giving a command or instruction, so instead of “added login API routes” you’ll have “add login API routes”. To test if you’re using the right tone, you can try completing this sentence with your Git commit subject: “If applied, this commit will insert the subject here”.</p>
<h4><strong>Character Limit:</strong></h4>
<p>Your title or subject should be capped at 50 characters, so make it as concise as possible. You could have noticed this if you use vs code for your git commits.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/515/1*CzKFipUf3G8HFF4VfcRzxg.png"></figure><blockquote>With this constraint, every space is important, so make sure you don’t have unnecessary punctuation, especially periods at the end of your commit messages.</blockquote>
<h4>Give detailed explanations when necessary in the commit body</h4>
<p>Some code changes need to be explained to properly guide the team members on why such decisions were made and how they were implemented. That being said, not all code changes need a body; a well-crafted title would be enough. For example, a typo fix in the doc doesn’t need a description; you could just use git diff to check the code difference and see what typo was fixed.</p>
<blockquote>Note: When you write the body of a commit message, you must mind its right margin and wrap text manually. The recommendation is to do this at 72 characters so that Git has plenty of room to indent text while still keeping everything under 80 characters overall. <a href="https://cbea.ms/git-commit/">source</a>
</blockquote>
<h4>Use the pound (#) sign to refer to Git issues and discussions</h4>
<p>Your git commit is frequently intended to fix a certain issue or be related to a discussion on GitHub or GitLab. You could reference them in your commit message by using the pound sign(#) followed by the issue number.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/956/1*FIor0vivtxFzNoCzoEwpIg.png"><figcaption>The Issue number</figcaption></figure><p>If done correctly, your commit would reference the issue.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aKeZpGNSo7iRQdopkF9HxQ.png"><figcaption>a git commit referencing a GitHub Issue</figcaption></figure><p>That feels like a lot of rules to keep in mind; one might forget them. What if we could have a set of guidelines and linting for our Git commit messages? Well, there it is. Welcome to the world of “conventional commitment.”</p>
<h3>What is Conventional commit?</h3>
<p>The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history. Conventional commit helps you give valuable information about code changes at a glance through its standards for commit messages.</p>
<p>It gives your commit messages this structure:</p>
<pre>&lt;type&gt;[optional scope]: &lt;description&gt;<br><br>[optional body]<br><br>[optional footer]</pre>
<p>It uses type to communicate the intent of the code change. Here are some commit types.</p>
<ul>
<li>feat: use when a new feature is introduced in the code.</li>
<li>fix: use when a bug is fixed.</li>
<li>chore: use when a code change does not relate to a fix or feature and doesn’t modify the core code or test files (e.g., dependencies bump).</li>
<li>Refactor: used when restructuring existing code.</li>
<li>CI: use for continuous integration-related code changes.</li>
<li>Revert: use when reverting to a previous commit.</li>
<li>test: use when adding new tests or updating previous tests.</li>
</ul>
<p>Other commit types are build, docs, style, perf, etc. You can view the full specification <a href="https://www.conventionalcommits.org/en/v1.0.0/#specification">here</a>.</p>
<h3>Integrate conventional commit in your development environment.</h3>
<p>When working with teams, it is critical to have consistency across code, which is why large organizations have coding style guides. That also applies to commit messages; you can have a linter for your Git commits. 2 well-known tools do just that in the JS world: <a href="https://commitlint.js.org/#/">Commitlint</a> and <a href="https://commitizen-tools.github.io/commitizen/">Commitizen</a>. I’ll be discussing Commitlint in this blog.</p>
<h4>Setting up Commitlint</h4>
<p>First, we need to install the Commitlint CLI</p>
<pre>npm install --save-dev @commitlint/cli @commitlint/config-conventional #npm<br>yarn add -D @commitlint/cli @commitlint/config-conventional #yarn<br>pnpm add -D @commitlint/cli @commitlint/config-conventional #pnpm</pre>
<p>Then we install Husky to create git hooks for our commit messages.</p>
<pre>npx husky-init &amp;&amp; npm install       # npm<br>npx husky-init &amp;&amp; yarn              # Yarn 1<br>yarn dlx husky-init --yarn2 &amp;&amp; yarn # Yarn 2+<br>pnpm dlx husky-init &amp;&amp; pnpm install # pnpm</pre>
<p>The command will set up Husky, modify the package.json file, and create a .husky folder where pre-commit and commit-msg files are present. By default, the pre-commit file will run npm test when you commit. You can comment it out or delete it to stop this behavior.</p>
<pre>#!/usr/bin/env sh<br>. "$(dirname -- "$0")/_/husky.sh"<br><br># npm test &lt;--- remove or comment the test</pre>
<p>We can then add a commit-msg git hook to support Commitlint by running this command.</p>
<pre>npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'</pre>
<p>Let’s test if it works by running this command.</p>
<pre>git add .<br>git commit -m "let's see if this works"</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/927/1*pLPTuQd3X19w_NujBB1upQ.png"><figcaption>Failed to Commit</figcaption></figure><p>It shows an error with a detailed explanation and prevents the git commit. Let’s change the commit message and check that it works.</p>
<pre>git commit -m "fix: remove typo in landing page header"</pre>
<p>now it works</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/618/1*Qh5T44Y_8CEQU8acoxbPLA.png"><figcaption>Successful commit</figcaption></figure><h3>Conclusion</h3>
<p>Git commits are stories that describe the origin of a repository and where it is headed. A good Git commit should follow a sequence, just like in stories. Of course, there could be plot twists, but it should still follow a pattern. Having a set of rules to guide your writing is certainly a step in the right direction. Thank you for reading. See you next time.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ff38cf2b2811" width="1" height="1" alt="">


I write better Git commit messages than you do


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_ffWAx4OOrzDO6MhW-1XCw.png"></figure><p>Often we get so excited about what we want to build that we skip the most important part — good thinking and planning. This might be fun at first, especially when the caffeine kicks in, but you’ll soon find out that you’ve wasted a lot of time, which could have been saved with proper planning. “The best line of code is the one you don’t have to write” is one of my all-time favorite coding proverbs. It could be taken to suggest that careful planning can help you save time. To effectively plan a coding project, you need to:</p>
<ol>
<li>Know the issue you’re trying to solve,</li>
<li>and research potential solutions</li>
</ol>
<h4>Know your problem</h4>
<p>Charles Kettering once said, “A problem well stated is half solved.” Understanding your problem will enable you to avoid taking actions that might, at the very least, move you further away from the answer. Without a good problem statement, you’ll be trying to find a bug without any error message, which is possible but stressful.</p>
<h4>Proper Research</h4>
<p>This is a significant step in getting the problem solved. It mostly comes down to asking the right questions. You’ll have to check for available solutions and what modules, libraries, services, etc. can help you solve the problem. Typically, I keep track of all my research findings in a markdown file called research.md . This would be important for other people reading your code and adding attributions when necessary.</p>
<p>Many thinking paradigms can help you solve problems efficiently. But in this blog, we’ll discuss a <strong>mathematical thinking</strong> paradigm.</p>
<h3><strong>What is mathematical thinking?</strong></h3>
<p>Mathematical thinking is a way of thinking that involves using mathematics to solve real-world problems. Mathematical thinking is crucial in various sectors like science, technology, economics, and even our daily lives, as this book by Brian Christian and Thomas L. Griffiths highlights. As programmers, we constantly try to solve problems and ensure they are well-optimized, but this would not be easy without a solid foundation in math.</p>
<p>Let’s say we are building a password generator. Without proper thinking and planning, we can come up with this.</p>
<a href="https://medium.com/media/63f353538ca688673be842f6bf40ece0/href">https://medium.com/media/63f353538ca688673be842f6bf40ece0/href</a><p>The code starts with creating the variables that store the possible characters we want in our password. The characters are then concatenated and randomly sampled to match the respective password length.</p>
<p>This is meant to be a secure password generator. At first sight, it looks just right, but looking into it, you’ll find a few lapses. First, the code just samples the possible characters, but the values returned aren’t going to be unique. Here’s a sample value: iaE6hTGtaOHV This makes the password easier to crack. Secondly, the variability of the characters isn’t certain. Let me explain what I mean. With this approach, you can have a password just like this: abcdefghijkl . The chances are low¹ but it is possible.</p>
<h3>Password Generator: With mathematical thinking</h3>
<p>Now let’s think of the problem we are solving. A password generator is meant to generate secure passwords, so how can we ascertain this?</p>
<ol>
<li>A way of doing this is through the password length. Four-digit passwords are easier² to crack compared to eight, twelve, and so on. We can choose 12 as the default number of characters for the passwords.</li>
<li>Another way of ensuring password security is through the variability³ of the password characters. A password of all lowercase would be far easier to hack compared to a password that is a mixture of lowercase, uppercase, and digit characters.</li>
<li>Also, we should avoid having passwords with repeated characters.</li>
</ol>
<p>Taking all this into account we have this code.</p>
<a href="https://medium.com/media/5c688fb099a36f7d01a9b4bbad728923/href">https://medium.com/media/5c688fb099a36f7d01a9b4bbad728923/href</a><p>The code builds on the previous example with some major changes. I added the individual counts for each character group (i.e., lowercase, uppercase, digits, etc.) and asserted that they added up to the password length. I then randomly sampled each character group and joined them into a single string. With this new approach, you can notice I switched from random.choices to random.samples . I did this because the latter ensures the values are uniquely sampled. I then finally uniquely resampled the crude password to change the character placements.</p>
<p>Through mathematical thinking, we were able to break a problem into distinct sections and account for them in our solution based on mathematical proofs. This example is just to show how you could tackle any problem pragmatically; it saves time and helps you develop near-perfect solutions.</p>
<h3>Tips on improving your mathematical thinking</h3>
<p>Mathematical thinking can be the difference between good and terrible code, and it is also a really good skill to have in your tool belt as a programmer. It may appear perplexing at first, but that is how most people experience things. I’ll give you a few tips that I think can help you in your journey of learning more about mathematical thinking.</p>
<ol>
<li>
<strong>Practice</strong>: This can’t be overemphasized. You need constant practice to get better at thinking mathematically. It is like learning a language; just a few days without learning it can be disastrous. You have to solve lots of problems and work at them, just like with any other skill.</li>
<li>
<strong>Take a course on discrete mathematics</strong>: Discrete mathematics can help you hone your problem-solving skills, which are necessary for programming. Programmers who are successful in discrete mathematics will be able to <strong>generalize from a single instance of a problem to an entire class of problems and to identify and abstract patterns from data</strong>.</li>
<li>
<strong>Learn by example</strong>: sometimes the problems we face while programming has been faced by someone else. You can learn from how they approached the problem and improve on it if need be.</li>
</ol>
<p>Thanks for reading</p>
<h4><strong>Footnote</strong></h4>
<p><strong>low¹</strong>: the chance of having abcdefghijkl password from 74 password characters</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/442/1*5eP4Sf_vMOK-L3gmd6SMDA.png"><figcaption>calculation</figcaption></figure><p><strong>easier²</strong>: a 4-character password with 74 possible password characters and no repetition would have</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/444/1*GWy3xGT_dO150N9Jy26eAw.png"></figure><p>While a 12-character password with the same conditions have</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/471/1*TmXuA1dm5_ebITRWK9dojQ.png"></figure><p><strong>variability³</strong>: a 12-characters password with only lowercase characters(26) and no repetition would have</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/471/1*-AFHEesxfdfuc_R7k1GpAQ.png"></figure><p>While a 12-characters password with variability(ie. a mixture of lowercase, uppercase, and digit characters(62)) have</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/471/1*v0wpnLht3lcMI6FP6rYM7w.png"></figure><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4cc89eca2ea9" width="1" height="1" alt="">


Think before you code


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OgfGgWfcV4JEKUvNxf2AuA.png"><figcaption>Logo of framer motion</figcaption></figure><p>One of the significant differences between a boring user experience and a good one is animations. Not just fade-in animations but animations with context(such as micro animations in icons or buttons and Layout animations).</p>
<p>Layout animation which is my focus is really of importance, because the attention of the user often follows animations. But the current state of the web doesn’t support layout effects. We’ve always seen layout animations on mobile apps, when we click on a card then it pops up giving more details, and the experience is quite enjoyable You’re always sure of what to do next. but on the web, you get something like this.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/854/1*GuhBgtp4Ppedai47b4xv9w.gif"></figure><p>😤😤 annoying isn’t it. The user interface just threw the user into an ocean of doubts and questions— “what am I going to do next?”, “Is this the element I clicked on?”. These sorts of questions are what prompted me to write this.</p>
<p>We would implement a solution to this problem with <a href="https://reactjs.org/">react</a>, <a href="https://www.typescriptlang.org/">typescript</a>(very minimal), <a href="https://stitches.dev/">Stitches.js</a> (a CSS in JS library), and <a href="https://www.framer.com/motion/">framer motion</a>, our animation library. First, we build our user interface, nothing complex just a centered grid with 2 columns and cards.</p>
<h4>1. Building the user interface</h4>
<p>We import the necessary libraries</p>
<a href="https://medium.com/media/b3929118573e74269d6296196b92bb18/href">https://medium.com/media/b3929118573e74269d6296196b92bb18/href</a><p>we then get the data for components you can get all the images from the <a href="https://github.com/Code-Victor/Layout-animation">GitHub repository.</a></p>
<a href="https://medium.com/media/36ca65ad8f6e50264b44c17efd47a3dc/href">https://medium.com/media/36ca65ad8f6e50264b44c17efd47a3dc/href</a><p>then we create our base components, it doesn’t have to be in the same file.</p>
<a href="https://medium.com/media/4efacedaa90a8a050034d22fa6c6699f/href">https://medium.com/media/4efacedaa90a8a050034d22fa6c6699f/href</a><p>the syntax of stitches is just like most CSS-in-JS frameworks, with a twist — Stitches has a fully-typed API that gives it the best Developer Experience. Composing all of these little parts together, we build the user interface</p>
<a href="https://medium.com/media/2d3b19397646bc7ac6320e59e3a94e71/href">https://medium.com/media/2d3b19397646bc7ac6320e59e3a94e71/href</a><p>The code is simple. we created a state to store the id of the selected item(for those new to typescript the &lt;undefined | number&gt; is just to indicate that type of the constant selected can either be a number or undefined) and we built the user interface with the base components. This is the result</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/854/1*GuhBgtp4Ppedai47b4xv9w.gif"><figcaption>of the layout</figcaption></figure><p>It’s functional but without animations. To add animation to it will have to make use of the motion component.</p>
<h4>2. Adding animations</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*04haYozrLH6fRrBl7VTzcg.png"><figcaption>updated components</figcaption></figure><p>now that we’ve updated our base components, we have to make use of the properties given to us by the motion component. The properties of concern are layoutId and layout . with layoutId property framer-motion can identify the element and if the position of the element changes in the DOM it animates the elements(so far the layoutId stays the same). This might be a lot to take in at first but in practice is far too easy. So we add the layoutId to the Card component.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZKmR6ei3hcacoBX38cENVQ.png"><figcaption>added layout Id (line 17)</figcaption></figure><p>the results?</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/854/1*WLtlkvckMd7hY_4apRhr5w.gif"><figcaption>Final result</figcaption></figure><p>better right? We can notice that the elements in the background were animated to fill up the space but the MainCard didn’t animate at all. that’s because the MainCard doesn’t have the layoutId of the selected card(i.e the card that was removed from the DOM). By adding this we get the animation we’ve been looking for.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vdy1H26IxczklahfMlwQXQ.png"><figcaption>MainCard with layouId(Line 38)</figcaption></figure><p>the results?</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/854/1*UIQY4a_bitBDdxOzo3PebQ.gif"><figcaption>Final result</figcaption></figure><p>we’ve finally seen what we want. You can see how easy it is to build layout animations with framer-motion. this is the code for the app</p>
<a href="https://medium.com/media/2384baab1d401198db563d2884ff181a/href">https://medium.com/media/2384baab1d401198db563d2884ff181a/href</a><h4>3. HindSight</h4>
<p>we could have added a placeholder for the Card which is selected to prevent the unnecessary movement of the other cards.</p>
<p>then we have something like this</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/854/1*L-eOpqwIkQv9Lw7bdV1VrA.gif"></figure><p>Cards with placeholder</p>
<p>you can see the demos <a href="https://code-victor.github.io/Layout-animation/">here.</a> Thank you and follow for more.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=25807bfc3750" width="1" height="1" alt="">


Hey, I'm

Hamzat Victor

Featured Articles

Featured Projects

Github Repo Details

Keyboadr

Jadoo Landing Page

Daily Dose of Motivation

Subscribe to my newletter