First week first assignment Project Management

First week first assignment. So it started with simple setup of a html page and push all the stuff into a git repository to publish out own project documentation. Because of my past as Web developer this was not a huge problem. So I skipped the <h1>hello world</h1> example and moving on setting up my space for the academy.

Setup my environment ready to code

Frameworks I used web 2.0

Because I am not the most reliable source when it comes to style a website with plain css I revisit some good friends of mine.

First of all you have to know I am mostly working on a good old Macbook. So safari ist my choice when I normally surfing the web and doing my research but when it comes to web development I rely on firefox. You can download it on https://www.mozilla.org.

Because I haven't develop websites for a while I had to download Firefox and install it. The perfect add-on for every web developer is firebug. You need it to lookup your DOM model, make live css changes and use it to enter js command on your site. Also the debug functionality of firebug is very helpful when digging into javascript code.

Safari fail to load the navigation

Writing the html co. Lets build a website

Because of the lack of an php engine, we had to stay on the client side. Because the server could not build our website from templates, I had to develop a little JS script that include all my menu stuff that should be in every html file.

When everything worked fine in firefox and uploaded it to my repository I checked my Website with safari. What happened was, that the code that worked in firefox don't get Safari to to anything.

// Load the navigation for the site
$.ajax({
    url: 'navigation.html',
    type: 'GET',
    success: function(data, textStatus, jqXHR) {
        $("body").prepend($(data).find('nav').html());

        var current_path = window.location.pathname.split('/').pop();

        $(".nav a[href='" + current_path + "']").parent().addClass('active');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    }
});

This was the first attempt to load the menu lazy into the DOM.

Firefox laod the navigation
Safari fail to load the navigation
// Load the navigation as first node into the body and mark the menu in which we are.
// At first add a container to host a place for the navigation bar
$('.container').prepend('<nav id="navigation" class="navbar navbar-default">');
// Load the navigation via ajax and put it where the host container waits
$('#navigation').load( "navigation.html nav .container-fluid", function() {
    var current_path = window.location.pathname.split('/').pop();
    // Activate the right menu item that is selected
    $(".nav a[href='" + current_path + "']").parent().addClass('active');
});

So I updated my code and try another approach. This time it worked on both browsers. So it make sense to test even simpler code, because of the different behavior of the browsers.

Finally I add a sticky footer to my site. I used the sample of bootstrap and benefit from its css sample. http://getbootstrap.com/examples/sticky-footer-navbar/#

html {
    min-height: 100%;
    position: relative;
}
body {
    margin-bottom: 60px;
}
.footer {
    background-color: #f5f5f5;
    bottom: 0;
    height: 60px;
    position: absolute;
    width: 100%;
}
body > .container {
    padding: 60px 15px 0;
}
.container .text-muted {
    margin: 20px 0;
}
.footer > .container {
    padding-left: 15px;
    padding-right: 15px;
}
code {
    font-size: 80%;
}

This css makes you a nice looking footer.

<footer class="footer">
    <div class="container">
        <FOOTER CONTENT>
    </div>
</footer>

The content of the license I generated with the creative commons link generator from https://creativecommons.org/choose/

git and gitlab start collaborating

To push our new site to the web-server, we became access to a gitlab repository. Gitlab is a software to host several git repositories and has an user management to give users the permissions to specific projects. Gitlab is a great way to collaborate with other developers. It also comes with a ticket system and much more. So I gained access to my project. Its time to become handy with some git commands. First of all I had to pull the empty project from the server. I'll do this on my mac on the console with the command

git clone <path to my repository>

This download the repository to my local machine and create a local repository. After the repository was created its time to work on the project. When some changes was made and some files where added to the project its a good idea to view what has changed on the project. This can be accomplished with the git status command.

Git status command

To add all the changes and new files to a commit I had to add them with the command

git add ./*

As you can see in the image, all the fies was added for the next commit.

Git status command changes

With all the changes marked for the commit, I was able to commit to my local repository.

git commit -m"<commit message>"

What is left to do is to push the commit to the server.

git push origin master