Ensure gitignore ignores files correctly

Introduction

In this tutorial we’ll take a look at how to get gitignore to ignore files correctly when it seems that it is not ignoring the files that you have specified in the .gitignore file.

Let’s examine why this would happen.

gitignore will only ignore files that are not currently under source control. This means that if a file was committed before it was added to the .gitignore file, it will continue to track the changes of this file.

This is the basic principle of how gitignore works.

It is good practise to always update your .gitignore file before you commit any files that you do not want or need under source control. These files are commonly binaries, executables or any generated files that are automatically created when you build a project.

There may be cases where unwanted code is checked-in by mistake with the inital commit or subsequent commits. This is when our described problem will arise. No matter how many times you try to specify the file in the .gitignore file, it will always remain in the staging area.

Prerequisite Knowledge Assumed

The below resolution example makes use of the following software’s

  • git
  • git extensions

If you are unfamiliar with git extensions, there is a section right at the bottom that contains just the git commits that are required to resolve the problem.

Resolution

Steps that are required to resolve this problem:

  1. Remove the files that you do not want tracked by source control, from git
    1. You can do this by running “git rm -r –cached file/s
  2. Commit these removed files
  3. Update .gitignore file
  4. Commit .gitignore file

Let’s walk through the following example to expand exactly what you need to do for each

You’ve got a new repo that has just been created. You’re super excited about your new repo and this is the view that you have in git extensions:

When you go to commit you see the following:

From here you decide to stage all the files without adding the files in the bin folder to the .gitignore file.

So you stage all the files and hit commit.

Changes have now been made to your normal.code file and as a result the auto.gen file has been updated. When you go to the commit screen you now see the following:

At this point you realise that you don’t want the auto.gen file or any files from the bin directory to be committed to source control. When you try to add the bin directory to the .gitignore file it doesn’t seem to work, since the staging area looks like the image below:

Point 1 implemented

This is where you will need to implement point 1 (as discussed above).

To do this, open git bash and navigate to the repo.

Once here, run the following command:

See image below:

As you can see, the two files in the bin directory were removed.

When we return to git extensions and refresh the staging area we see the following:

As you can see from the above image, the two bin files have been marked as “deleted“. The files have not physically been deleted. They have simply been removed from git’s tracking.

Point 2 implemented

Now we need to commit these removed files so that git will no longer track changes made to these files

After you have committed these files your git extension will look something like this:

Point 3 implemented

You can now update the .gitignore file to add any additional files that you would like to ignore. For the purpose of these example, we do not need to add any more contents to the .gitignore file as we have already specified all the bin files in the .gitignore file.

Point 4 implemented

You can now commit the .gitignore file and git will never track any files in the bin folder.

Simple git commands to resolve

If you are unfirmaliar with git extensions you can simply execute the following git commands to resolve the problem:

See the below images for the full example

How to use basic handlebars (handlebars.js)

Basic steps

In this article we will take a look at creating a basic handlebars file and making use of it in your html page. There are a few basic steps to use handlebars that we need to follow.

  1. Create the handlebars template file
  2. Get (or make up) data that will be used to populate the handlebars template
  3. Make sure to wrap the data in an opts where you can append the containerSelector (explained more below)
  4. Create a method that will do the injection of the data
    1. This method will also place the handlebars template onto your page

The code used in this article is simply for example purposes.

A full html page will be provided at the bottom for reference. For the sake of the example, all the code will be inside of the one html page; however you would likely want to have these components separated out as good coding practices dictate. When it comes to split out the code into different files, remember to include all the files in the main html page. An example will be shown at the bottom as well.

1. Create handlebars file

There are three things that can be noted here.

  1. We put an ID on the script tag – “handlebarsTemplateExample”. This will be used as our template selector which will be discuss below.
  2. We are creating HTML in the script tags (this is how handlebars works).
  3. We have this weird notation of “{{” and “}}”. These are variables which handlebars uses to bind information. Similar to AngularJS.

2. Get data for handlebars to inject

For this basic example we will simply make up some data. Ideally you would want to get this data from an ajax call or something similar.

3. Wrap data in opts

Since all of this is done in JavaScript it makes it easier for us to manage our code if we wrap all of our arguments into an “options” variable which is usually shortened to “opts”.

Opts is simply the parameters that we are going to be passing to the method. It is easier to say: “myMethod(opts)” if there are plenty of arguments that you want to pass to the method as opposed to: “myMethod(arg1, arg2, arg3….)”.

Making use of opts is also a better JavaScript practice as you can easily determine what each of the parameters are referring too. You can take a look at these two articles for more information on that (since this is a whole other discussion):

  1. http://stackoverflow.com/questions/12826977/multiple-arguments-vs-options-object
  2. http://stackoverflow.com/questions/4893642/javascript-passing-arguments-to-function

So let’s make the “wrapper”

In the above code block you will see that we have added templateSelector and containerSelector to our opts object.

  • templateSelector will be used to determine where we get our source from (i.e. the handlebars template)
  • conatinerSelector will be used to inject the result of the handlebars into a div on your page. This means that you would need to have a div (with an ID of “insertDataHere” (in this example) on your html page). You can see the full html page below if you are confused.

4. Create method to do handlebars injection

This is the final step to get your basic handlebars up and running. We will now make the basic handlebars injection method.

The code above is quite simple. Let’s break it down line by line.

This takes the html from the templateSelector and stores it in a variable called source. This would mean that it contains our html where we have defined: {{data.header}} and {{data.information}}.

Now that we have the basic handlebars “template” (inside source), let’s create the actual handlebars template by compiling the source. The result is stored in template.

This line is where the magic happens. Now that we have a compiled handlebars template we can send the template our data. The variable “data” must contain “header” and “information”. If it does not, these items will not be bound to the template. This matches the names that we gave our data injection variables between the “{{” and “}}” in our handlebars file.
Lastly we put our completed template (which is stored inside html as per the previous line; with its data injected in) inside of our div on the main html page.

You have now created a basic handlebars template and injected it into your html. Please see the below code for the full reference.

Full one page HTML

Remember you can also always download the files and not use the HTTP address for the script/s.

References to remember when splitting out files

Output

Here is a screen shot of the result

blog-handlebars-example

UPDATE/EDIT

Previously I had mentioned that you could extract the handlebars template out of the html file. Your external reference would look like this:

This will not work, because there is one thing that I forgot to mention. The extracted handlebars file needs to be inside of an HTML file. This is because a .js file does not register “<script>” tags.

This means that you would need to load the HTML page into your other HTML page. This is just a simple way of extracting the handlebars file out into another file; it is however not the most pleasant way of doing it. For the simplicity of this tutorial I would recommend that you rather keep the handlebars script in your HTML file and not split this into another file.

If you do wish to split it into another file this is how you would do so:

Furthermore, in your HTML page you will need to add the following

 

How to detect phishing emails

This may come naturally to some of you but to others it can be very difficult to tell whether an email is legitimate or not. This is the reason that banks and other companies continuous say that you should never click on links (in emails) that would hint that you reset your password (or doing anything with your sensitive data) with this said company. You should always navigate to the official web page and then proceed to do whatever it is you need to from there.

Of course this doesn’t stop someone from hacking the actual site, but that’s a discussion on it’s own.

About 2 years ago ago I got this email from “Facebook” in my inbox (or rather my spam box). Now, I’m sure some of you have received emails like this in the past too (and some of you without a Facebook account I’m sure; I had recently deleted my Facebook account but here lay a message claiming I had unread messages on my account), but I thought it would be an interesting exercise to decompose the email and inspect everything in order to point out certain things that you should always be on the look out for when you receive an email and you are suspicious about it.

Let’s take a look at the following image:

facebook-phising

As you can see the email says that it is from FacebookAdminstration, but look at the email address between <>, that is where it actually came from. Always make sure that you inspect this first. Usually it will not come from the Facebook (or which ever company they claim to be from) domain. It is very possible that this can be spoofed (using a simple SMTP server, but use this as your first point of entry. If this does not match up to what you think it should be, then the email is definitely not legitimate.

One of the more obvious signs of a phishing email is the nonesense which appears in the subject line. This one read: “Contraction Your 2 unread messages will be deleted in a few days swerve”.

  1. This subject line does not make any sense
  2. The casing in the sentence is wrong

If you use gmail as your email client (as I do) you can see the original email as text. To do so:

  1. Click on the little arrow next to the reply button.
  2. Select “Show Original”.

Right at the bottom of this post I have included the full content of the original content that I received (I have omitted my email address). The following section is a breakdown of the important things to look out for.

In the original content you will see this:

DO NOT CLICK ON THE LINK.

The above href contains a URL to a unfamiliar site. It is definitely not a Facebook site. This link (as you can see from the original email below) appears in every single clickable part of the html from the email and should not be trusted.

Another thing that you can look out for is the delivery chain of the email. This will be found in the header of the email as shown below:

The way which you read this header is a little bit counterintuitive, as you have to read it from the bottom-up. I have replaced my original email address with “me” in the above header.

As you can see the email is directed to “me” and this is where the email would start it’s travel. Similar to how you would write a normal letter. You need to provide the location at which it needs to be delivered. The beauty of email is that it will record each domain that touches it. Imagine the receiver of your plain old fashioned letter could know who exactly touched the letter on the way to them. If all the people that touched the letter were legitimate, the receiver of your letter could guarantee that it could be trusted

With email, this is always the case.

If we move further up the header to line 14, we can see that the email came from: “FacebookAdministration <egal.hm@bongfaschist.de>”. This matches what was discussed earlier. At this point, this is the original sender as they would like to be viewed from the SMTP server. It is possible however, that this could appear to be legitimate. We need to further inspect the email

Let’s take a look at the next two lines of the header above that:

One of the most important things to note here is the SPF. SPF is Sender Policy Framework. Basically it is an email validation system that ensures that the sender of the email is authorised on the domain that they claim to be from. As you see from the above, the SPF failed. That means that the person that sent this email on “bongfaschist.de”, is not a valid user on that domain. Hence we cannot trust this person.

Here is a legitimate email header from MyBroadband:

Let’s take a look at the received part of the header:

Here we see the original exit point of the mail. This email was sent from “www-data by mybb-mail01.jnb1.chs.hetzner.co.za”. This my seem a little bit scary. It’s not mybroadband.co.za. However, a quick google search will tell you that this address is simply the reverse DNS of the hosting site mybroadbandmail. You can see this at this link here: http://whatmyip.co/info/whois/197.242.89.180/k/471857840/website/mybroadbandmail.co.za

Furthermore, if we inspect the SPF part of the header:

Here we can see that this client is authorized on that domain. This means that the sender is not claiming to be another entity


Lastly, below is the original content of my Facebook email that I received. I have included in the post for reference and completeness.