Setting up Pre-commit Formatting Hook

For those of us who work with large teams, we all notice that sometimes code gets committed with PR/MR that has only differences in formatting. So frustrating when you see your MR reviewer asking you to add a semi-colon or removing a trailing comma.

Here’s the quick way to set up your pretty-quick code, that it all gets cleaned before being committed and your MR/PR opened.

First, set up your .prettierrc.yml under the root directory of your project as follows:

printWidth: 120
singleQuote:true
semi: true

Second, install dependencies for the pre-commit hook

npm i --save-dev husky pretty-quick

Lastly, add the following into your package.json

"husky":{
     "hooks":{
          "pre-commit": "pretty-quick --staged"
      }
}

 

Sources Used:

http://prettier.io/docs/en/precommit.html

That should do it. Happy Coding & Committing! šŸ™‚

Adding OSX Automated Tasks for Git Commits

Suppose you work on a project where you are spending a lot of time focused on the code and fixing the bugs that keep popping up. It’s been a stressful day and you know it, the worst of it is when you forget to commit your changes you have been working on the whole day. Then keep on reading..

Now I’m proposing having an automated script which will run git status on your repo every night and checking if things need to be committed or not.

Here’s how you can do it:

Requirements:

  • OSX
  • Being comfortable writing shell scripts

1. Create an Automator

Now to create an automator for certain time, this is a bit different:

  1. Open Automator
  2. Choose Calendar
  3. Apple Script

For clearer way to create this automator, here’s a good video tutorial to create calendar automators for that.

on run {input, parameters}
	tell application "Terminal"
		if not (exists window 1) then reopen
		activate
		do script "gitcommit" in window 1
		delay 2
		close window 1
	end tell

	return input
end run

Now this automator is basically calling a gitcommit shell script which you on your machine.

2. Create Shell Script

Here’s what you do to create shell script:

  1. Open your favorite editor
  2. Write some code in it
  3. Close it, run chmod 700
  4. Copy and paste this very file in your usr/local/bin directory

Here’s the code for that shell script:

 

#!/bin/bash

open -a Terminal

cd path/to/osx_actions
source ready.cfg

if [[ $var1 == 'commit' ]]; then
	cd path/to/your_repo
	if git status | grep -q 'nothing to commit'; then
	  echo "already up to date"
	else
		echo "a commit needs to be done."
		git add -A
	 	git commit -m "$var2"
	fi
fi

Now, this bash script goes and read from a cfg (configuration file) you have. In this case, I have my configuration file under osx_actions directory.

3. Create Configuration file

The cfg file basically looks like this:

var1=commit
var2="your default commit message"
  • var1 is a flag whether to perform commit operations or not. It takes values [commit/nocommit]
  • var2 takes the default commit message you have, off course if commits happened automatically without you changing this message you may need to do git commit –amend to edit that message for that commit be more meaningful.

Now you are almost done.

Just go to your calendar, and using the same mentioned video above:

4. Add Event to Calendar

Add an event to your calendar, choose whether you want it to repeat and how frequent and also add the time on which you want to this script to run.

Hope this tutorial helps.

Happy Coding šŸ™‚

References Used

Livestyle

So, I think this is one of the coolest tools for one to us in creating / editing your styles right on the style.

Not only I have used it and found it really handy, but its convenienceĀ comes now with its support for SASS, editing your scss and less files can’t be easier. Now after praising this tool, I have to point out something that kept me hanging for few days. It had an issue picking up global variable colors;

Example:

$p-color : #000;
$t-color : #ff7;

body {
background-color: $p-color;
}

These global colors weren’t picked up, which made me scratch my head a couple of times till I found that that syntax is not accepted. Having a space before the color breaks it.

The correction therefore is like:

$p-color: #000;
$t-color: #ff7;

 

My two cents tips for someone using livestyle, this amazing tool; livestyle

 

Accessing Your localhost from your mobile device

You have your localhost set up, and you are working on your responsive website, after trying many of the simulators. You still want to test on actual devices how the sites are going to look like.

Here’s a very simple way of testing your sites and viewing them on your mobile devices.

  1. Have both your localhost computer and your mobile device connected to the same wifi.
  2. Get the IP address of your localhost
  3. Get the port number for your localhost
    portnumber
  4. Write in the following address in your mobile browser: http://ipaddress:portnumber/webdirectory
    Example: http://192.168.0.100:8888/CSSTesting

Now you got it.

My New Chrome Extension – Tweet A Link

Tweet a Link Chrome Extension

Tweet a Link Chrome Extension

Just finished creating a new chrome extension which helps you tweet the urls you have one-click away. Rather than search for the Tweet button within pages, you have in your extensions in your browser.

No more you need to look for the tweet button or copy and paste the urls you like in order to tweet a certain page you like.

You can search it on the chrome store: “Tweet a link”

or you find it in the following link:

Enjoy your surf and sharing.

CSS – Safari ignoring width property

This has been occurring lately, and I couldn’t find much written about it, took me a couple of days googling it and trying to find what would be the reason that Safari would ignore our width property. After discovering that the width property is completely messed up on Safari browser only on Mac computers Ā as Safari on Windows didn’t have the same. I found that the solution for that is just to add a max-width property along with the width property. This has fixed it for the most part. No much reasoning I found after that, but seemed to me that width property has be associated with a max-width property as well in order to have the layout looking right.


div {width: 155px; max-width: 155px;}

 

If anyone has different suggestions or a reasoning behind this, surely share.

Stockulator on your iDevice

Here’s an app I developed more than a year ago and has been on the app store for a year now with some under 1000 downloads without any advertisement.. word of mouth and usefulness of the app.

The App as described on the apps site: Ā Ā Stockulator is a calculator designed for helping you estimate and calculate your possible gain vs. loss when a stock price rises or falls. It simulates your entire calculations of number of shares, amounts etc.. and helps you project how much money you are going to make before buying or selling any shares.

Get the app: http://itunes.com/apps/stockulatorĀ 

Help for using the app:Ā http://apps.amplioslabs.com/stockulator/

Welcome to your ideas and comments.

Thanks,

Joe