Practical Git Tutorial Part 1

Getting started with Git can be a complicated affair. What do all those commands mean, exactly? When can I stop reading this tutorial, and learn something practical? You end up spending a lot of time bouncing between high level theory and searching Stack Overflow for specific errors you are getting. You end up with neither a good grasp on Git theory, or a nuts and bolts understanding of how to complete basic tasks. There is a real lack of easily digestible Git tutorials that help you get your hands dirty while understanding what you’re doing conceptually. That’s what this series of articles attempts to remedy.

Creating a Repository and Pushing Work to a Central Repository

Step one: Create a repository

This part is simple. git init will create a folder titled “.git” in the directory you’re in, and allow you to push files (and subsequent file updates) from this directory to a central repository that you will specify.

Step two: Point your repository to a central repository

Somewhere on another computer (or your own) is another .git folder that we want to push our changes to; a central (or “remote”) repository. What we’ve done here is called the git remote command with the directive add. We’ve then passed the add directive two parameters: a name to refer to our remote repo by and it’s location on the internet.

Step three: Test it

Great. Now let’s test it out. Find a file in your directory you want to push to the central repository, and add it to your list of files to push:

Save the list

The -m flag stands for “message” and “first commit” is the message I chose to associate with this list. You can write whatever message you want.

Now push the list to your remote repository

Here origin is the name we previously gave to our remote repository, and master is the default name of the branch we’re working with. Until we create another one, the concept of branches can be safely ignored.

And that’s it. All we’ve done is create our own repository, pointed it to another central repository, and sent a file to it.

Thanks for reading. Please let me know what you thought in the comments below.

What Is an Event Object?

Web developers use them commonly, but most can’t answer the question: What is an event object? The answer lies in a broader question: what, exactly, is an event? When a user is interacting with a web page, they are triggering a series of events based on their actions.  When they type something into a form field, click a link, or scroll down the page, they are creating a new event. It’s just a matter of capturing them. A captured event exposes an event object for the developer to work with.

Capturing an Event

The web developer has the opportunity to capture every event the end user triggers. The user triggers events of course by providing input to the computer through the mouse or keyboard. To answer the question, what is an event object, the developer has to first capture one of these events. The developer captures events by creating event handlers, chunks of code that fire when the event is triggered. Then and only then does he or she have access to the event object.

Consider the following code:

This is a simple event handler. The event object is passed into the function in the variable “event.” It doesn’t matter what you name it, but you will often see it referred to as “event” or simply with the letter “e.”

So What is An Event Object?

Event objects are special objects (a collection of methods and properties) that are only available inside event handlers. They are used in two main ways, to stop the expected results of the event from happening, and to get useful information about the event.

First Purpose: Stop the Expected Results of the Event From Happening

Let’s look at the event handler again:

Here we have called a function of the event object: preventDefault( ). When a user clicks a link, the browser’s default action is to load a new page. preventDefault( ) tells the browser, “Don’t load the new page, stay on this one.” preventDefault( ) is useful in these cases, because often times you want to stay on the current page. At least until you have executed the code inside the event handler.

Second Purpose: Use Information About the Event to Make a Decision

Now consider the following code:

timeStamp is an event object property that tells us the number of milliseconds that have elapsed since the event was created. In most cases, this is when the page was loaded. This information isn’t particularly useful on its own, but we could add it to an “if” statement to achieve something a little more meaningful:

Here we are saying, “if it has been six seconds (6,000 milliseconds) since the page has loaded, stop the link from working and provide an alert message to the user.”

The event object can also tell us what other input the user gave when the event occurred. Consider the following code:

The shiftKey property is only true if the Shift key is depressed.  So here we are saying, “if the user had the Shift key pressed down when they clicked the link, show this alert message.”

In Conclusion

Whenever an event occurs on a page, we can capture information about the event in an event handler, and take some useful action. Event objects are the collection of functions and properties that allow us to do get this special information about the event, and act directly upon it. For example, event.preventDefault( ) allows us to stop the default actions of the event from occurring. Properties like event.timeStamp and event.shiftKey tell us when the event occurred, and one thing that was happening at the time of the event, respectively. In a nutshell, event objects give you fine grained control over real time events occurring on your site.


Thanks for reading. Please let me know what you thought in the comments below.