There are ways you can shorten the amount of words when executing git actions:
~/.gitconfig
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 alias.ci '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 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.
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 Click example
$('#btn').click(function(){
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.
Foreach Example
var names = ["A","B","C","D"];
names.foreach(function(name,index){
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");
callback(userData);
}
//So now to call the function and see what will happen
InputMessage({name:"A",age:"27"},OutputMessage)
//Result:
//This is a object
//name A
//age 27
InputMessage("String Message",OutputMessage)
//Result:
//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)
{
callback(firstName,lastName);
}
//When using the function UserInput to call obj's function directly
//you will not get the correct result
UserInput("C","D",obj.SetName);
//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)
{
callback.apply(callbackObj,[firstName,lastName]);
}
//Now this will use the obj as the correct this
UserInput("C","D",obj.SetName,obj);
//This will now edit the variables inside the obj
console.log(obj.firstName + " " + obj.lastName)// C D
http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/
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 (this.data[randomNum].name + " " + this.data[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
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 is a front end javascript that creates popup windows with ease.
Here is the website to download Remodal Js
https://github.com/VodkaBears/Remodal
Instructions:
Installation
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> <h1>Remodal</h1> {Your Code} <br> <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button> <button data-remodal-action="confirm" class="remodal-confirm">OK</button> </div>
Initializing with Javascript
var inst = $('[data-remodal-id=modal]').remodal(); var inst = $(".remodal").remodal(); //Used to open the modal inst.open(); //Used to close the modal inst.close(); //Get the current state of the modal inst.getState(); //Destroy the current modal inst.destroy();
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.
State:
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 { test1:{}, test2:0 }; } |
| 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}] |
Register You Identity
git config --global user.name"John Doe"$git config --global user.email johndoe@example.com
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 is a free and open source distributed version control system to help with small or big projects.
Popular Web Based Git
anxtech 