DEV Community: Salim MAHBOUBI

Intro to Git hooks

Salim MAHBOUBI — Wed, 18 Dec 2019 14:31:34 +0000

Where there is repetition, there shall be automation
—King Sisyphus of Ephyra

These words maybe were not said by Sisyphus, but they are not without wisdom; follow them.
While programming, one of the most repetitive actions is typing the same set of characters every time you write a git commit, whether they be issue numbers, branch names, signatures, or something else. Those repetitive tasks might be due to a lot of reasons like company standardization or just plain open source commit guidelines.

Disclaimer: please do not try git hooks on important repositories unless you fully understand what the commands you are invoking do. Try new things on a new empty repository that you can delete if things don't work out the way they were supposed to

What are hooks? Git hooks?

In programming, hooks are —generally speaking— bits of custom code that the base code allows to intervene at certain places.

In git, we're allowed to do that; we write a script, configure it, and it gets executed before or after git events/actions such as a commit, a merge, or a rebase.

Our use case

In my job, I find myself writing basically the same word in the start of each commit message. So I thought of finding a way to automatically append that same word to every git commit message.

Where to put our script?

First, you need to be able to see hidden files, then you simply go to the /.git/hooks directory in your local repository. That's where hooks are stored for each repository. You can find a bunch of sample scripts in this directory. Either edit the prepare-commit-msg.sample and save it as prepare-commit-msg (with no extension), or just create a new file with prepare-commit-msg as a name

What to put in our script?

You can virtually write your script in any script language like bash, php, JS, python, ruby, and many others. For our purposes, we will write our script using bash and a unix utility called sed.

Before diving in the code, you should know that a prepare-commit-msg hook gives you access 3 parameters, in order:

The file that containts commit message itself (We will only use this one)
The source of the commit message
The SHA-1 of the commit if we're editing it

These parameters are accessible through bash positional parameters that follow the aforementioned order, so the commit message file is in the variable $1.

Our script looks like this:

#!/bin/sh

COMMIT_MSG_FILE=$1

MY_MSG="I LOVE MOM"

sed -i.old "1s/^/ $MY_MSG \n /" "$COMMIT_MSG_FILE"

What it does is pretty straightforward.

We put the commit message in a variable with a better name i.e. COMMIT_MSG_FILE
We put the word we want to be appended to each commit message in another variable for easy access and editing
We execute a sed command that adds the content of our $MY_MSG variable to the top of the commit message file

The sed command

sed is a powerful utility that parses through and edits text. It is out of the scope of this tutorial, so we will just understand the used command.

Besides the options, the sed utility takes two parameters:

The input file ($COMMIT_MSG_FILE in our case)
The script, where we tell it how to manipulate text from the input (in our case it is this: 1s/^/ $MY_MSG \n / )

In our command we specify the -i.old option which tells sed to edit the file in place i.e. overwrite it and create a backup file with the same name plus the .old extension. You can use any extension you want, .back and .bak are widely used.

Now we decipher the script.
sed substitution scripts are usually
divided by forward slashes in 3 parts:

The type of operation we are doing (substitution, deletion, ...) and which lines/part of the text we are affecting
A regular expression to search for the part that is getting substituted
A replacement string

In our case:

The 1 in the beginning means "only the first line"
The s means this is a substitute operation
The ^ caret means the start of the buffer, so this isn't really a substitution but an addition
$MY_MSG \n is the replacement string, so the contents of $MY_MSG plus a carriage return

Test the script

After saving the script and making it executable (chmod +x prepare-commit-msg in *nix systems), we just need to commit something.

Edit a file, stage it, and upon executing git commit a text editor pops open with the commit message file loaded, and sure enough the first line proudly says "I LOVE MOM"

If you specify the message through the -m option or through your text editor/IDE, the message will be appended by "I LOVE MOM" automatically. Try it and use git log to see your beautiful commits.

What's next?

This is a rather simple use case, you can try make the message dynamic or maybe try another hook. I can't recommend you enough to read more about git hooks and utilities like sed. I am sure you will find at least a way to automate some tasks and become more productive.

Make Animated Buttons With Colored Bottom Edges

Salim MAHBOUBI — Sun, 25 Nov 2018 16:20:14 +0000

This is an entry level post explaining line by line how to make simple good looking animated buttons using only CSS and HTML.

First, check what we're going to do before diving in the code:

The HTML

<button class="shadow-btn">
  Button
</button>
<button class="border-btn">
  Button
</button>

Basically, the code is telling the browser to display two buttons, and to assign each one to a distinct class to be styled by CSS.

Q: Why not use the <input type="submit"> tag instead of <button>?
A: For my case, I just like the conciseness of <button>, it defaults its type to submit; also it's easier to get when reading a long form full of other <input> tags.
Read a StackOverflow Discussion about the matter.

The CSS

We'll explore the sheet, selector by selector.

-1 :root

:root {
  --main-color: #16a085;
  --transition-time: 0.5s;
}

The :root selector is a CSS pseudo-class. While using HTML, it matches the html selector, except it has a higher specificity.
--main-color and --transition-time are CSS custom properties we can name them ourselves. In this case we're using them as variables (Yes, CSS custom properties are not equivalent to variables, I'll write a post about this later). Since we're using these values multiple times, this helps us later if we want to change them, we'll change them only once, no need to Ctrl+F the CSS to change all occurrences.

-2 button

button {
/* We're selecting every <button> in the document */

  margin: 1px;
  /* We're telling CSS to give 1 pixel of "room" in all directions*/

  border-radius: 0;
  /* We want our buttons to have sharp 90 degrees corners*/

  border: 0;
  /* We want our buttons to have no border, more on this later*/

  padding: 10px 30px;
  /* We want our text to have some space inside the button*/ 

  background: #414141;
  /* All buttons are to have this dark background*/

  color: white;
  /* Our text will be white*/

 /* Explanation of the remaining 3 lines is just outside of this code block*/
  -webkit-transition-duration: var(--transition-time);

  -moz-transition-duration: var(--transition-time);

  transition-duration: var(--transition-time);

}

So three last lines of this selector code do the same thing, it's just that not all browsers understand transition-duration yet, so we use vendor/browser specific prefixes to have the same functionality cross-browsers and cross-versions.

transition-duration and its sisters tell the browser to take some time to transit between the current state of the element and the future states. The future state in our case is :hover, which is a pseudo-class CSS uses when the user hovers over an element.

In var(--transition-time) we're using the var() function to reference the afore-declared --transition-time custom property. The preceding rule is equivalent to writing transition-duration: 0.5s;.

-3 button:hover

button:hover{
/* We're telling the browser to apply the following rules to any button that gets hovered over by the user*/

  background: var(--main-color);
  /* We're setting the background color to our afore-declared custom property*/

  color: black;
  /* We're setting the text color to black*/
}

The difference between the two styles of buttons lays in the two remaining selectors

-4 .border-btn

.border-btn {
  border-bottom: var(--main-color) 5px solid;
}

We're selecting the elements that have border-btn in their class, and giving them a bottom border of our --main-color, with a 5 pixel width and a solid continuous style. Remember when we gave all our buttons a border of zero? We're overriding that now, thanks to CSS specifity. We're only overriding the bottom border, the rest stay zeroed.

-5 .shadow-btn

.shadow-btn {
  box-shadow: inset 0px -5px var(--main-color);
}

Here, we're making the same thing as before but using the box-shadow property.
We're adding an inset (inside) shadow of 0 pixels in horizontal offset; -5 vertical offset, it's negative so the shadow would be in the bottom; and colored with our --main-color.

-Difference between .shadow-btn and .border-btn

If you look closely at the result, the main resulting difference is the height, the .border-btn is 5px bigger. It's because the border edge thing is located outside the box.

Q: So the shadow is smaller because the shadow edge thing is located inside, why not use the default outer shadow?
A: We can use box-shadow without inset, the .shadow-btn would look exactly the same as the .border-btn, but it will not behave the same way. If you hover over an outer shadow, the browser won't interpret it as hovering the element, it feels awkward. Go and try it on the CodePen!

How to attribute another author when you're committing on git?

Salim MAHBOUBI — Mon, 07 May 2018 16:38:52 +0000

Why?

You might find yourself in a situation where you have to commit some code that has been authored by someone else. They might not have access to the repo, or they might be accustomed to Bazaar/SVN/Mercurial but not git, or maybe they're just on a 3 years vacation.
If you commit with the default global or project config, git will present you as the author.
You should not want that to happen for two reasons:
1- You might take credit for someone else's work and that's unethical.
2- You might take blame for their shitty code and that's bad.

How?

For a new commit attributing another person, use this command:

git commit --author="Ms. Jane Codeldoe <Jane@Codeldoe.com>" -m "Jane wrote this I'm just committing"

How it looks on GitHub:

For older commits, it's a bit more complicated, you want to avoid being in this kind of situations.
But, there are solutions, you just need to do some good old googling (or Binging, or Duckduckgoing, whatever suits you).
Solutions might vary depending on whether the commit is pushed to remote or not.
Solutions also vary depending on the git hosting service you're using, I've seen GitHub specific solutions that might not work elsewhere.

P.S
If you're stuck with this kind of problem, or any other problem you think I might be able to help solve, please contact me at msalim [at] boun.cr . I'll be glad to help with my humble know-how.

Critique my JS solution to this CodeWars Kata

Salim MAHBOUBI — Wed, 07 Mar 2018 20:45:57 +0000

The Kata

The exercice basically asks to convert any 'T' to 'A' any 'C' to 'G' and vice versa for any given string.

My solution

I know it might not be the exemplary solution but it was the first thing that popped in my head.
I wrote it first like this:

function DNAStrand(dna){
let map = Array.prototype.map;
let reversedDna = map.call(dna, function(x) { 
  let y;
  switch(x){
    case 'A': y = 'T'; break;
    case 'T': y = 'A'; break;
    case 'G': y = 'C'; break;
    case 'C': y = 'G'; break;
  }
  return y; 
});
return reversedDna.join('');
}

then I thought to myself: "I can remove that y variable." So I did:

function DNAStrand(dna){
let map = Array.prototype.map;
let reversedDna = map.call(dna, function(x) { 
  let y;
  switch(x){
    case 'A': return 'T'; break;
    case 'T': return 'A'; break;
    case 'G': return 'C'; break;
    case 'C': return 'G'; break;
  }
});
return reversedDna.join('');
}

Then I thought: "I can get rid of the break lines since the return statements are already breaking, can't I?"

function DNAStrand(dna){
let map = Array.prototype.map;
let reversedDna = map.call(dna, function(x) { 
  let y;
  switch(x){
    case 'A': return 'T'; 
    case 'T': return 'A'; 
    case 'G': return 'C'; 
    case 'C': return 'G'; 
  }

});
return reversedDna.join('');
}

Is there any way to improve my solution? Do you have another way of doing that? Leave your remarks in the comments

Why I refused a high-paying job while being unemployed

Salim MAHBOUBI — Tue, 27 Feb 2018 19:38:37 +0000

This was originally posted on my blog

I had to let go an opportunity that could have paid 700 Euros per month, which is way above the average pay in Algeria.

The offer

The job discription stated that the employees were to teach and help computer science students in their last year of their master's degree.
The teaching sessions were to be held via video calls for an hour or more.

In addition to the salary, the company would pay for a relatively high-speed internet (8Mbps); for a high quality camera; and they would pay the salary for two to three months, in which the employee will have to study on their own some educative material the company would provide, 8 hours a day, 5 days a week.

Why I refused the offer

Reason 1: The incompatibility of the candidates

The company had gathered a dozen candidates, and scheduled a video call meeting regrouping all of us. I noticed that all candidates, including myself, were not fit for the job. Some candidates didn't even have education or experience related to computer science or computer engineering.

I began questioning that their mission was really about teaching and not bullshitting students into paying someone who would read course material for them.

The company was only looking for people who could communicate easily.

Reason 2: Punctuality and time management

I was told that I would have my first interview at 9am, but it was the aforementioned video call meeting. Which was followed by one to one interviews with all candidates, I ended up being interviewed at 12pm.

After which, we were told to stay on the group call until 2pm, for no reason. And we were asked to reconnect again at 3 to hear from the boss.

The whole thing was badly managed.

Reason 3: The contract

Since it was a foreign company not implemented in Algeria, the employment terms stated that we would work as freelancers, with a minimum commitment of one year, with no leaves and no vacations.
If a candidate was to change jobs or just stop, they would have had to repay the two/three months salary spent on the self-driven training.

Conclusion

In the past, I wouldn't have ever imagined letting go a job that paid this much, but I came to the realization that not every well paying job is worth the headaches and certainly not the ethics.

Explain PostgreSQL Like I'm Five

Salim MAHBOUBI — Sat, 27 Jan 2018 14:09:47 +0000

What differentiates Postgres from other SQL DBs?
Can you include simple examples?

As a senior dev, how can a recruiter convince you to move to another company?

Salim MAHBOUBI — Sun, 22 Oct 2017 11:27:46 +0000

Will a Jack Of All Trades, Master Of None developer get hired these days?

Salim MAHBOUBI — Mon, 09 Oct 2017 10:36:25 +0000

I know how to start a product with a wide spectrum of languages/frameworks/tools, but I don't excel in any. I can make a good native android app with medium functionality, but I don't master the design and layouts. I can make a minimal Ruby on Rails app, but nothing more. I can make a small game in Unity 3D. I'm learning Elm, JS, and ReactJS, but I can't really build anything with them right now.
I usually learn technologies when I need them.

I'm trying to get hired overseas or work on a remote position, but it seems like a bit hard.
Should I just quit applying and focus on learning a narrow set of skills, or do companies hire learners like me?