Git create repo commands

First, create a new repo tour-of-heroes-angular on Github

1. Go to the directory you want to create a git repo and from inside the directory issue

git init

2. If first time installing git, issue the following commands
git config --global user.email "yashish@xxx.yyy"
git config --global user.name "yashish"

3. stage files locally

git add .

4. Commit locally
git commit -m "Initial"

5. Add the local repo to the remote repo that was created

git remote add origin https://github.com/yashish/tour-of-heroes-angular.git

6. Optionally verify

git remote -v

[
NOTE: if typo, update url with command
git remote set-url origin https://github.com/yashish/tour-of-heroes-angular.git
]

7. Push changes to local repo to github

git push -u origin master

[
NOTE: if new repo contains some files not in the local repo, you may need to use -f option and overwrite. Do not use -f in team environment.

git push -f origin master

]

8 pull from remote
git pull origin master

9. set up tracking so we can issue just git pull command

git branch --set-upstream-to=origin/master master

--------------------------------------------------------------------------------------------------------

to push an existing repository from the command line

git remote add origin https://github.com/yashish/kendo-button-cli.git
git push -u origin master

or to create a new repository on the command line

echo "# kendo-button-cli" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/yashish/kendo-button-cli.git
git push -u origin master

JavaScript performance test utility script

/* testImplement - specific code we want to test, encapsulated within its own function.
   testParams - params test code needs to work, might be an array or single value.
   repetitions - number of times test to be run so as to calculate average speed.

   Usage:
    var testCode = new SpeedTest(testImplement, testParams, repetitions);
       testCode.startTest();
*/
function SpeedTest(testImplement, testParams, repetitions) {
this.testImplement = testImplement;
this.testParams = testParams;
this.repetitions = repetitions || 10000;
this.average = 0;
}

SpeedTest.prototype = {
startTest: function () {
var beginTimeMs,
endTimeMs,
sumTimesMs = 0;

//repeat test to find total sum of time taken
for (var i = 0, x = this.repetitions; i < x; i++) {
beginTimeMs = +new Date();//unary converts Date value to numeric ms
this.testImplement(this.testParams);
endTimeMs = +new Date();
sumTimesMs += endTimeMs - beginTimeMs;
};

this.average = sumTimesMs / this.repetitions;
return console.log("Average executions across " +
               this.repetitions + ": " +
               this.average);
}
}


//Convert poorly written code  to test into a function so we can use it as the testImplement parameter
var someArray = ["AAA", "BB", "CCCC", "ZZ"];
var fooList = [];

//poorly written for loop code to test
for (var i = 0; i < someArray.length; i++) {
var newFoo = new Foo(someArray[i]);
fooList.push(newFoo);
};

//wrap above code in a function so we can use it in SpeedTest
var poorCode = function () {
for (var i = 0; i < someArray.length; i++) {
var newFoo = new Foo(someArray[i]);
fooList.push(newFoo);
};
}


//Test Speed version 1 (params are global, so no need to pass in)
var poorCodeTest = new SpeedTest(poorCode, null, 50000);
poorCodeTest.startTest();


//Test Speed version 2 - making use of params list
var testParams = [someArray, fooList];
var poorCodeParams = function (listOfParams) {
for (var i = 0; i < listOfParams[0].length; i++) {
var newFoo = new Foo(listOfParams[0][i]);
listOfParams[1].push(newFoo);
};
}
poorCodeTest = new SpeedTest(poorCodeParams, testParams, 50000);
poorCodeTest.startTest();


//Improved for loop code test
var goodCodeParams = function (listOfParams) {
for (var i = 0, x = listOfParams[0].length; i <x; i++) {
listOfParams[1].push(new Foo(listOfParams[0][i]);
};
}
var goodCodeTest = new SpeedTest(goodCodeParams, testParams, 50000);
goodCodeTest.startTest();

// Note: This snippet was customized from Code School JS Best practices. Excellent online learning site

Working with React

React

These are excerpts from a Pluralsight Webinar on React.

React is just a View library but we can still build large scale apps.

Angular and ember are full frameworks.

Angular - brings JavaScript to HTML - eg using ngfor ngif inside html tags

React is the other way around - brings HTML tags inside JavaScript!!

If state is this..then make this html be there or not

jQuery is used for DOM manipulation, add classes, event listeners and remove them etc.

it has built in AJAX, while React is just let us change states and re-render the screen only the parts that have changes...very very performant.

What is Flux and what is Redux?

Flux is a very abstract design pattern - for them MVC wasn't scalable anymore in facebook. Open source project.

Flux is very abstract and just a design pattern but can have library (Redux) that implements Flux.

Redux adds more to the design pattern that Flux suggested in its implementation.

Without using Flux, you can still write with React alone.

when writing larger apps, you will naturally run into design patterns that you want to use and that is where Flux and Redux comes in.

start learning with React and writing React components first.

Better to use React's own synthetic events, but we can also use jquery for that.

React now works with all browsers.

Diffing happens before rendering but actual DOM is changed.

For AJAX with React, recommended FETCH or AXIOS apis

No need for templating engines, as REACT comes with its own built in templating baked into the library.

Understand life cycle methods for React to understand it better.

How to deal with different CSS styles in React.

Read Pluralsight training CSS Styling with React to compare different methods of styling.

We can completely create and server side render React components from the server side, it is possible and obviously better performant but more complex.

Node and Express are back end technologies that you can use for server side rendering.

How is binding property to a state different  from 2 way data binding.

Angular is listening for browser events - happens outside of development workflow. So it detects and binds.

In React it is one way - so we can tell when to update the DOM when the state changes. This is a simpler model for development.

React doesn't include a client-side routing - can install a npm package React-routing??

When things become complex, look at Redux for routing.

React-Native - is for building native apps and running mobile apps.

React will work well with .NET. Apparently even can do server-side rendering with .NET!

By and large anything that serves a RESTFul API and returns JSON, we can use React unless we are trying to do some complex server side rendering.

WebPack is popular environment for building React that gives you a bunch of different things like Module loading etc.

You could just build React and use Gulp + Browserify instead though.

For compiling multiple components, it is better to use one component per file. Say use ES2015 Module Loader to aid that.

Babel can be used to transpile into JavaScript

JavaScript Variable Hoisting Example

var message = "I am Global";

function sayHello(){
     //message is truthy
     if(message){
        console.log(message);
  }
}

//This function runs as expected
sayHello();



function sayHelloHoisting(){
  //The if block should not run as message has already been initialized and is not falsy
  if(!message){
  //variable declared inside if block
  var message = "I should not get displayed";
  console.log(message);
  }
}

//The message gets logged to the console!!
sayHelloHoisting();

-----------------------------------------------------------------

//what actually happens with variable hoisting
// a new message variable created inside function which is undefined(falsy)
function sayHelloHoisting(){
var message = undefined;
if(!message){
  message = "If not for variable hoisting, I should not display!!";
  console.log(message);
  }
}