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
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

          "pre-commit": "pretty-quick --staged"


Sources Used:

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:


  • 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
		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:



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"
		echo "a commit needs to be done."
		git add -A
	 	git commit -m "$var2"

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:

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


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;


$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
  4. Write in the following address in your mobile browser: http://ipaddress:portnumber/webdirectory

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: 

Help for using the app:

Welcome to your ideas and comments.



UX Common Pitfalls – 3

3. Relying on Flash to Convey a Message

So after discussing two of the major pitfalls for UX designers these days, one has to discuss what seems to be a controversial topic among many of the UX designers these days; whether to use Flash in sites or not?

Yet the discussion here isn’t as much on discussing the pros and cons of using Adobe Flash, for this I’d recommend some of the well written articles about this:

Website Performance

No one can deny that Flash has added lots beautiful interactive design when it was first introduced yet later, we discovered the prominent issues evolving from building sites Flash. The Cons of using Flash are so much user based, as you may have noticed. First, it has performance issues for the site, this affects usability. Performance directly affects usability.¬†According to an article about website optimization, Amazon found out that every additional 100 milliseconds of load time decreased sales by 1 percent.¬†¬†In fact, user frustration increases when page load time goes more than 8 seconds. That same article presents a study by Google, that adding half a second to search results decreases traffic and revenues by 20 percent. –¬†The Psychology of Web Performance

Unfortunately, many of the UX experts these days are technically detached which makes them thinking of mainly having a fancy site. Having a fancy site does have its trade offs. ¬†And when that tade-off is a performance issue, you have fallen into one of the worst yet common pitfalls in UX design. UX experts, hence, have to study well that their fanciness could affect site’s speed. Site’s slow speed would frustrate the user’s experience. Frustrated user’s experiences would decrease traffic and you’re headed to a big failure. A good article about Designing for Performance is presented here on,¬†Improving UX Through Front-End Performance


Second major issue you’ll face with building sites in Flash it does not work well for accessibility, since it is based on¬†images and that has the hindrance of having alternative texts, again the issue with screen readers.

Touch Screen Devices

Third major issue would be its compatibility with touch screens, something you would not want to ignore or forget when building sites today. People browser through their iPads and Galaxies everyday and this number is increasing significantly as I mentioned before in my first blog of this series.

Flash Plugins

Last major point in using Flash is:


I am sure many of us have seen these messages before. Yes, plugins do have their issues and they are not very stable. In using Flash into your site, you are setting yourself up to whatever issues the user may have with their browsers. And the most common of the issues on browsers are the Flash crashing issues.


Then here comes the question, when should one use Flash then?

When Not?

So before saying the when? I have to say the when not? As mentioned in the title of this blog, it should be used by you shouldn’t rely on it in conveying your message. especially if this message is warning, like ¬†weather site warning of thunderstorms, or utility site warning of power shortage, these messages should be in developed using Flash.

Another instance where you do not want to use flash is relying on it on user’s enrollment and payment, since this could pose issues as well like plugin crashed while user is enrolling or paying. You do not want your users to face such issues.

When to use Flash?

Flash can be of very good use if you are presenting some that best be presented graphically, such as car model sites, fashion sites, artists/musicians or cartoon sites. These are just few examples.

It can also be used within your normal site to present a certain ad which you think would best be presented in flash. Many of the major sites are practicing this and it still provides good experience for the use. Such as, USAToday and many others..

Flash can be used in many instances, but bear in mind, it should only be used when the site’s performance isn’t badly affected and goes along only when it is needed. For this reason, UX experts should study well how sites are made and optimized technically before coming up with too fancy ideas which would affect badly the user’s experience due to the mal performance of the fancy site.



UX Common Pitfalls – 2

So after discussing the importance of designing with tablets in mind, that we would require ridding yourself of your old PC website building approaches. UX is an evolving learning, with basics in mind, still the user experiences changes on devices and for this reason, you have to accept change cause users are the main concern here. Unfortunately, UX designers base their achievements on fanciness rather than usability, so they rely much on animations, hovering, they ask the designers for more colors, lots of carousels, every link on the page behaving differently, some open boxes, others open pages, others get hovered over to have progressive disclosure boxes appearing to the right and left, overwhelmingly hovered navigations and so on.

2. Sticking to older approaches of fanciness

1. Using Hover? Hover for Progressive Disclosure?

With the animations being that appealing they resort into using it within every page of their websites. It comes from hovered form fields which will make appear a UI element of tooltip to hovering a chat link to popup a chat box, hovering of a login link to ¬†popup a login box. Not only this is a¬†hindrance¬†for ¬†accessibility users that elements and pages keep changing making it hard for screen-readers to know which element is next, it poses a different experience for touchscreen users who don’t have that user experience and those hovers are tapped however those boxes don’t disappear as user browses on unless certain scripts are inserted to¬†accommodate¬†that. Apart from that, seeing UI elements appear and disappear on hovering is simply an annoying experience. Here’s what sums it up by one of those who work at Google:

“UI elements that appear on hover:  Bad idea, or Worst idea?
Seriously. ¬†Even disregarding the accessibility issues and touchscreen incompatibility: ¬†Every single instance of this that I encounter manages to piss me off at some point. ¬†Can we just not do this anymore? ¬†Please?‚ÄĚ ‚Äď Kenton Varda, ¬†Google

Should we do away with hovering effects? I would say no since I still use it, however it should be used not for appearing and disappearing of elements, it should basically highlight a section, in other words: changing the color of backgrounds of wherever you are on the page. This limitation is being used by major and model websites such as,, and many of the major websites which some of them have tried the hovering before and didn’t prove to be that pleasant of experience.

Hence, since the range of different touchscreen browsers and devices of today and the lack number of simulators, one cannot be certain without intensive ridiculous level of testing on all these devices to guarantee how the site will behave with these elements appearing and disappearing. In relying on hover for critical method of interaction such as login, chat, you would be setting yourself to an ocean of heartaches and the mess of creating code to accommodate different devices and then, maintaining that code. I hope you are putting maintenance into account before building.

Here is a list of interesting articles I have read and recommend when thinking of hover with a mind that’s embracing the future of tablets:

2. Colors?

So I have been working with a UX expert whose approach to anything unclear in the site is: add colors. Whenever anything is not clear in the page, just use colors, more and more. Until I received a list of about 20 colors to be used in the site’s toolkit. Then I came back to ask if those colors have any meaning behind them, unfortunately this wasn’t taken into account. So in an after thought, the UX started associating colors to every section in the site for example “My Account” should be in blue, “Community” should be in magenta. In an after thought, I felt that the UX design wasn’t done correctly to start with. It is true that colors give concept and should ease navigation for the user, but be aware of their overuse, cause they can present an overly busy site that isn’t user friendly.

I’ll be talking about this common pitfall separately where UX experts would just jump into design without thorough thought of what they want from the site and how it should attract users.

3. Overuse of Galleries and their Carousels

You can hardly find a site today without galleries and really they are a good way of transferring information and letting user navigate through the site.¬†Designers like it, UX experts like it because of its beautiful animations and managers think it is fancy. However, you may easily fall into the pitfall of the overusing it. Here’s an example of how designers and UX have come up with a design with overwhelming content and would eventually render a poor user experience:


Overuse of carousel, gallery of sliders, tabs renders to overwhelming content.

So let’s examine this example:

  1. There are tabs to browse through
  2. Arrows on right and left to navigate through slides
  3. Arrows on right and left to navigate through carousels
  4. Buttons at the bottom to navigate again through slides

Even though the design may appeal to lots of people but such is overwhelming in content to the use, that he would easily get lost in where he found this or that piece of information. Decreasing the navigation options would be easier for the use to go through the slides you want him to visit.

4. Links Behaving Differently

So I noticed that some designers, for their love of hovering and seeing animations on the page that the make links on the page behave unexpectedly for the user, such as some of the links will show box on hover, then after clicking on on that same link you find a collapsible content appearing underneath it, then after click on it again you are taken into another page. So I have seen the front-end developers code for the link’s first click’s behavior vs. second click’s behavior vs. third click’s behavior. Though it involved lots of thought and lots of work for the developer, it is counter-intuitive and a normal user would not expect any of such behaviors from a link at the page.

Then there’s another scenario where a link on the page will behave¬†separately¬†from the caret beside’s it.


In the above example of navigation, they are having the link(1) to take you to another page while the caret(2) besides it to expand and collapse to show the sub navigation. Not only is this behavior not intuitive for normal users, it has other issues such as: First, users of touch screens are having a small area to tap on to see the navigation sub menu. An important not to note for touch screens is to have larger areas for clicks. Second, users that have accessibility issues are have a small area to move their mouse to and click on, they’ll have to be very precise, something that has to be taken into account for those who use other devices other than the mouse or use the mouse but are having muscle problems of precising its pointer on the screen, same goes with visually impaired ones who still have a small area to click which is not a good UX for accessibility users.

5. Hovering Menus

Again we are discussing the hovering and this time is for the menus who have really large boxes appearing out of them and in order to go to subnav, you have to keep hovering over the parent nav until you reach the sub sub nav and so on… This renders a bad user experience since users have to make sure the hovering is in the right path. Hovering in general can be very annoying.

Here’s a good article on that: Why Hover Menus Do Users More Harm Than Good?

UX teams should start rethinking their approaches particularly to target touch screen devices as mentioned in my previous blog, they have to moderate in the use of animations, make sure the site is not overwhelming in content or too busy in colors which have no concept meaning as well as less of the hovering effects which though may appear good and developers like the challenge of animating them, still they can be too annoying for a normal using accessing your site.

UX Common Pitfalls – 1

Before Building Your Website

With the touchscreen devices booming these days, user experience becomes even a more challenging as changing with what the user is expecting from visiting a website. At the time of writing this blog, 70 million in the USA alone are using tablets as their primary device for browsing. Apparently have seeing how the tablet usage has been increasing more and more, UX designers have to rethink their approaches for building their websites, and accordingly have to put some of the things into considerations so that Front-end developers won’t have to develop particular scripts for dealing with tablets vs. normal computer usage. Here are some of the common pitfalls UX have in creating new websites, these common pitfalls will be described in details along here and coming blogs:

  1. Ignorance of tablet usage stats
  2. Sticking to older approaches of fanciness
  3. Relying on Flash to convey a message
  4. Jumping straight into design
  5. Creating overly explained prototypes and wireframes
  6. Depending heavily on carousels and galleries where users can easily get lost into the overwhelming content
  7. Forgetting accessibility users as part of the design
  8. Excessive usage of colors when conveying their thoughts to graphic designers
  9. Excessive number of links on the site
  10. Ignoring speed and caching
  11. Not studying the web analytics of your site
  12. Unclear value proposition
  13. Lack of focus
  14. Not considering usability testing
  15. Problems with forms

So now that these points are being listed, let’s go ahead and explore what issues:

1. Ignorance of tablet usage stats

So this one is very common and whenever the UX designer is being asked about the tablets, they’d normally answer: “It is not in scope” and starts mentioning the budget constraints. In fact, usually you don’t need a¬†separate¬†budget for a site to look friendly and with pleasant user experience on both tablets and computers. You just have to rid yourself of older UX approaches and embrace the future. The number of users today using tablets is massively increasing and it will increase significantly if not double by the time you finish your website. You don’t want to revisit your site again after few months to redo most of its functionality to fit tablet users, ask front-end developers to rewrite their code to fit in there for users with tablets as well as ask other developers to start user-agent detection of devices to start addressing compatibility. Read the stats and understand the tablets are booming these days and users are heavily relying on it. “experts say that the tablet will be used more than the smartphone[which have now pushed PC out of the first place of ranking in some countries] for internet searches in the near future (by 2013)“. –Worldwide Tablet Usage Statistics Bearing this in mind, you should consider that it is more¬†convenient¬†for users to pay online bill while browsing on their iPads or make a bank money transfer on their touchpad while talking with a friend over coffee. You should, hence, rethink your design to fit into the tablets and touchscreen world rather than revisiting your site’s compatibility issues after it is done. Just because it was not in scope while you first created it. You should also never depend on your current site statistics of how many tablets are accessing your site, since users may not have been able to access it because your current site is NOT tablet-friendly. Therefore, your primary statistics is how major websites are being accessed and what are the popular web statistics of devices in general. That’s mainly because you want to fit your site to be accessed to as much audience as possible without much of compatibility issues or recoding for different compatibility issues. Here are some sites I find useful for stats of the web: