Create local repository and push it to GitHub

First of all, you will need to create local repository.

Requirement: you should have git already installed. You can find more info here: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

Go to the folder where your project is, then in terminal if you use Linux (0r Git Bash if you use Windows)

then type:

See if you have .gitignore file. If you have it then add folders which you want to exclude from appearing in your repository. If you don’t have it, then create it and add folders to ignore.

When you enter above command you might see message this message *** Please tell me who you are.

That means git doesn’t know particulars of the committer.

Then run this commands:

After that try committing again:

Now that git knows who we are, head to GitHub and create new repository(also skip adding README file, it’s too early too do so)

Then:

When you do this, you might face this error: hint: Updates were rejected because the remote contains work that you do
hint: not have locally.

That means remote repository has files that you don’t have locally. For example LICENSE file.

Then type:

This will allow you to get the remote files

Now:

Type your username and password

Now you if check your GitHub repository you can see that your files are there.

That’s it.

So whenever you do changes locally and want to commit them, just run these commands:

You might notice that every time you push your files, you need to enter your username and credentials. You can use below command to store your username and password. However, it will store your password somewhere on computer in plain text 🙂

then you will be asked to enter your username and password. After completing this you won’t be asked to do it again.

 

Sources:

http://kbroman.org/github_tutorial/pages/init.html

https://stackoverflow.com/questions/11403407/git-asks-for-username-every-time-i-push

 

 

Initial CSS

It’s a good idea to custom set styles for the elements. However, elements are pre-set to certain puddings and margins . So it’s better to reset them. In your css file:

What are the options we used inside, you can see in my previous post.

CSS box model, Padding, Margin and Box-sizing

In css, all elements are placed in boxes. this is called box model.

Margin refers to the distance between the boxes.

Padding refers to the distance between the content and box edge.

By default, when we set the height and width of the element, the padding is also included. meaning if you have element like this:

the actual size will become 300px by 300px, because additional 100px is added to the content from each side. To prevent this, and set height and width such that padding and border is included, use

 

source: https://www.w3schools.com/css/css3_box-sizing.asp

https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css

How to enable minify on your local maven build

Sometimes you want to minify your js code on your local.

Normally, minify will be enabled on production, but not on local environment. So if you want to update or add new js library, you can test the minify on your local.

Go to pom.xml(the main one, the one in the project folder)

navigate to local profile(the name might be different)  <environment>local</environment>

then change this line <skipMinify>true</skipMinify>

to <skipMinify>false</skipMinify>

Polyfill

Sometimes older browser might not be able to provide support to newer features. So if we want to use unsupported feature(ex.: Object.create() not supported in older IE versions), we must add this support first. Manually adding support is called Polyfill.

To do so, we we must check, if the feature is supported, and if not, then only add it.

In below example, I will add support for Object.create() for IE(or any browser that does not support it).

So, what happens is, we first check if browser support the object create by running (!Object.create) . If browser doesn’t support it, then we go inside the if statement. Then we add create  variable to Object  which will hold the function. Then we check if we are correctly passing the Object that we need to extend (arguments.length > 1) . Then we create new object F(). Then we define F()’s prototype to be o (which is the object we pass inside). Then we return the F(). To sum up above code, the most useful part is F.prototype = 0; . This is how JS extends the features of one object to another. Just like Java’s inheritance.

Then we can use the Object create as usual, even if the browser doesn’t support this feature.

 

 

JS Reflexion: see what is inside the object

Sometimes, our code can get very complex because objects might extend the other objects. So it can get very tricky to debug the code. That’s why JS has useful feature called Reflection, which allows us to see what is inside the object.

The above code will sorta extend the john object with user object.  If you run the code below

So, what happens is, JS compiler will go through the Prototype chain, by finding firstname and lastname from John object, then getFullName() from it’s parent object which is Person. Basically, prototype chaining is feature of JS that automatically will search for the Objects fields and methods, if it cannot find it, JS will ascend to it’s parent. Js will continue searching for Objects fields and methods all the way till the Object.  All primitives, funcitons and objects in JS are extended from the Object object.

Output:

Below code, shows only the content of the john object

Output:

 

JS: IIFE(Immediately-invoked function expression ) and safe code

Sometimes we need to declare the function and call it immediately. Below code does that, it can also accept the parameter:

So we will see “hello John”. What happens here is that we wrapped the anonymous function inside the (); brackets. This allows to declare the anonymous function. Because JS compiler treats everything inside () as declaration. Then we add function and call it

second () actually invokes the function. The rest is easy we just pass the variable that we need. You can see the first example.

My understanding is that this approach is used in many frameworks.  It also possible to put the execute brackets () outside the function wrapper. Both are ok:

The beauty of the above code is that it’s safe. By that I mean that this code will run inside it’s own execution context and not global one.

So, variable “greetings” will not clash with variables with same name, but from other places in code.

If, however, we want to overwrite some existing global variable we can do it this way:

File 1, has this code:

File 2, has this code:

 

JS: good practices

  1. Be careful when returning some values

Ex:

function test(){

return

{

cacheable: true;

}

}

console.log(test()) ;

 

 

// console.log will return undefined, all of this is happening because the js compiler puts ; (semicolon) after the return statement. Therefore, it’s good practice to have curly braces directly after the return statment

ex: return {

cacheable: true;

}

2. Writing comments

The JS compiler will ignore the white spaces and comments so we can do something like this:

var

// this is the name of the user

firstName,

// this is the surname of the user

surname,

 

// this should be always more than 0

balance;