Git Alias

There are ways you can shorten the amount of words when executing git actions:


inside you can add alias for commands used often.

Another way is to add the aliases globally:

git config --global alias.[your alias] "[your action]"

ex. git config --global 'commit'

By adding these shortcuts you can decrease the amount of time needed to interact with git.

To see all your global alias you can use this command:

git config –list | grep alias

Font Awesome (CSS ICON Library)

Font Awesome has a wide range of responsive icons that can help the UI and UX design for your website.

How To Use:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">


Remember to also download the font packages in put it in ../fonts so the css can link to the appropriate files.

JS- Callback

A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction.

This can be useful when you are trying to execute two functions that are dependent in one another.

  • JQuery uses a lot of callback functions without us realizing it.
 JQuery Click example 
    console.log("Button clicked");

In the example above we are passing in an anonymous function into the click function. Somewhere inside the click function our anonymous function will execute.

  • Another example is the foreach function
Foreach Example
var names = ["A","B","C","D"];

     console.log(index + " " + name);

We are passing in again an anonymous function into the foreach function to execute the console.log message.

To write a callback function all you need to do it create 2 functions and pass one function as a parameter into the other.

//A general output message function
function OutputMessage(data)
    if (typeof data === "string")
       console.log("This is a string: " + data);
    else if (typeof data == "object")
       console.log("This is a object);
       for(var item in data)
           console.log(item + " " + data[item]);


//Function to take in the callback function
var InputMessage(userData, callback)
    console.log("Going to execute the function now");

//So now to call the function and see what will happen
//This is a object
//name A
//age 27
InputMessage("String Message",OutputMessage)
//This is a string: String Message

The example above shows how to pass a function into another function as a parameter

One problem that people face when using callback functions is preserving ‘this’
The example below will show how this can be done:

//An Object that has a function inside to set the first and last names
var obj = {
firstName: "A",
lastName: "B",
SetName: function(first,last)
   this.firstName = first;
   this.lastName = last;

function UserInput(firstName,lastName,callback)
//When using the function UserInput to call obj's function directly
//you will not get the correct result
//The this in this case will mean the global windows variables.
console.log(window.firstName + " " + window.lastname); //C D

//Instead you need to pass the correct this into the function to do this
//you need to change the functions a little
function UserInput(firstName,lastName,callback,callbackObj)
//Now this will use the obj as the correct this
//This will now edit the variables inside the obj
console.log(obj.firstName + " " + obj.lastName)// C D

Javascript – Bind

We use the Bind () method primarily to call a function with the this value set explicitly. It other words, bind () allows us to easily set which specific object will be bound to this when a function or method is invoked.

Bind is used to bind a specific this to the function. For example:

// This data variable is a global variable​
var data = [
  {name: "A", age: 20},
  {name: "B", age: 15}

var user = {
  data : [
    {name: "A", age: 25},
    {name: "B", age: 40}
  showData:function(event) {
    //var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1
    var randomNum = 1
    console.log ([randomNum].name + " " +[randomNum].age);


var showDataVar = user.showData;
showDataVar(); /// This will show name B and age 15. Because the this inside is the outside this not the inside one

var showDataVar = user.showData.bind(user);
showDataVar(); /// This will show name B and age 40. This is because you bound the user as this so the this will use the data array inside inside of the outside one

Velocity JS (Animation js library)

Veloctiy Js

Velocity Js is based off on JQuery’s .animate(), but can also work without JQuery. The main points today will be explaining why velocity js one of the preferred choices when doing front-end animation.

1. Callback functions

Using velocity js you have access to a wide range of callback functions, ex: Begin, Complete, and Progress. Using these functions you can have many different animations playing after each other. One of the most useful functions is the progress function, it can determine how much longer in ms the animation will play.

2. FPS

When using animation FPS (Frames Per Sec) is always a concern. Velocity is able to produce more FPS when playing an animation, compared to popular libraries like Animate.css.

3. Queue & Chain

When you are working with velocity js you are able to set up a queue of events or just chain events one after another.

For More information please look at the url below

Remodal Js

Remodal Js is a front end javascript that creates popup windows with ease.

Here is the website to download Remodal Js



Node Js
npm install remodal
bower install remodal
Including Js and Css file
link rel="stylesheet" href="../dist/remodal.css"
link rel="stylesheet" href="../dist/remodal-default-theme.css"
script src="../dist/remodal.min.js"

Including the Modal

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
      {Your Code}
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>

Initializing with Javascript

var inst = $('[data-remodal-id=modal]').remodal();
var inst = $(".remodal").remodal();

//Used to open the modal;

//Used to close the modal

//Get the current state of the modal

//Destroy the current modal

React Js

React Js is a front-end open source framework created by Facebook. It is used is to help create virtual DOM and better data flow.

Why React?

React is a open source that is written using components making you web-site structure clean. Everything including html is written inside a JSX file so all the html codes are generated dynamically making content change very simple.


Instances of each component are stored internally when rendering, making them easy to reuse. When a state variable is updated or changed React will automatically re-render the UI. React does this by diffing the current and new code to see if there are any differences and only updating the new content making loading speed extremely fast.

Component Lifecycle:

Lifecycel Description Example
getInitialState Get the initial state of the variables before component is mounted getInitialState: function() {
return {
componentWillMount Execute function right before component is mounted componentWillMount: function() {
{your code}
componentDidMount Executed after component is component is mounted. (View is already rendered similar to Jquery’s OnDocumentLoad)  componentDidMount: function() {
{your code}
Render Used to Render the View. The Html code is written inside the return. *(Some Html code are different from the traditional way. For example: class – className render: function() {
return (
{Html Code}
Mixin A component that has common functions or methods that other components can call from Including a Mixin

mixins: [{mixin_file}]

Git (Useful Commands)

Register You Identity

git config --global "John Doe"
$ git config --global

Initiate a New Git Project

 git init

Adding files that you want to commit

Add a single file
 git add {file}
Add all files
 git add -A

Committing files

By adding the dash m you can add any comment to your commit 
*Files Committed are not push to the repository yet
 git commit -m "Comment"

Push the committed files

 git push

Git Introduction

Git is a free and open source distributed version control system to help with small or big projects.

Popular Web Based Git

  • Github (Source code public unless purchase advanced version)
  • Bitbucket (Source code private)