wk1 | Principles and practices project management


Assignments :

  • Think about a final project (description/sketch out stuff)
  • Make a local copy of the Fab Academy repository
  • Build a personal Fab Academy website


My notes :

30 jan 2014 | Starting with Mercurial

I started out with watching some youtube video's to try and get a general idea about what kind Mercurial is.
The one I really liked was Mercurial Intro.mov : http://www.youtube.com/watch?v=F3EPd1nCFh8

Next step is installing Tortoise HG (The visual interface for Mercurial).

printscreen-1

printscreen-2

After that step I started going trough the tutorial mentioned in class : http://hginit.com/01.html



3 feb 2014 | Pushing, pulling & cloning repository

Under supervision of my tutor I've set up Mercurial (for my windows laptop), and pushed & pulled a html file for the first time ...

So, we start with making a clone of the repository of the FabAcademy. When this clone is set up on my laptop,
I can use this as my work folder. After working on my files I can 'push' only the changes from this folder back to the server.


For me its the first time working with Command Prompt as well...

  • Windows key + R = run window. Type cmd + enter to start up Command Prompt.
  • When typing a command in cmd without options > overview/listing.
  • copying tekst from cmd = right click > mark > select the text and press enter.
  • to cancel whatnots = control + C

When you fill in a string in cmd you can interpreter it as: hg clone [OPTION] ... SOURCE [DESTINATION]



Before I am able to pull files from the server, I need download the key.ppk file from my email
and put it in the user file of my laptop (pick a place on the c-disk, somewhere you don't have to move it anymore).

Because tortoiseHG is installed, were first gonna try if the 'tortoiseplink' command works with the key.

example tutor: plink -v -P 846 -i %HOMEPATH%\keys\academy ssh://hg@fab.cba.mit.edu

and changed it to: tortoiseplink -v -P 846 -i %HOMEPATH%\keys\academy.ppk ssh://hg@fabacademy.org

We got no response from this test, so decided to install plink anyway.



The .ZIP file contains all the binaries (except PuTTYtel) and also the help files. (file: putty.zip)
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

We also need to let my computer know that plink is installed (since it won't add automatically).

printscreen-3



test 1: plink -v -P 846 -i %HOMEPATH%\keys\academy.ppk ssh://hg@fabacademy.org

Like the previous test, again we see the password question appears in cmd. That is not supposed to happen, since we have the key.ppk file.

test 2: plink -v -P 846 -i %HOMEPATH%\keys\academy.ppk hg@fabacademy.org

ok, this works. Apparently adding 'ssh' isn't necessary. So removing this solves the problem. The server does refuse me though,
but this time we expected it to do that. This respond gives me confirmation that the key is correct but am not allowed to enter yet.



Note : When doing something new like a 'hg clone' it's important to first test the ssh tunnel with plink.
Because if you do it the other way around (first hg clone and than plink) you won't get feedback from plink if something is wrong.
This because plink tries to communicate with to the hg clone is stead of the user (aka me).


Executing the hg clone: hg clone -e "plink -P 846 -i %HOMEPATH%\keys\academy.ppk" ssh://hg@fabacademy.org academy.2014

ok. So now the clone has now settled on my laptop.



Now locally I adjust the 'hgrc' file (via notpad) to my name and email.
So next time, when I push or pull to the server, it will recognize my name.
And on the server you can properly see which user made the last changes.


printscreen-4

printscreen-5



3 feb 2014 | Hello world test

I downloaded Seamonkey. A wysiwyg editor (What You See Is What You Get).
I'm familiar with working in css (WordPress), so getting started for the hello world test isn't to difficult.

A YouTube Seamonkey introduction: http://www.youtube.com/watch?v=zcaYsG2nYqU


I made a index.html file and saved it in my folder.
Now it's time to open up cmd and to try out the pulling first and then pushing my index.html to the FabAcademy server.

  • hg status : shows changed files in the working directory
  • hg pull : pull changes from the specified source
  • hg update : update working directory
  • hg merge : merge working directory with another revision
  • hg add : add the specified files on the next commit
  • hg commit : commit the specified files or all outstanding changes
  • hg push : push changes to the specified destination
  • (use "hg help" for the full list of commands)

printscreen-6


printscreen-7



4 feb 2014 | Making my Fab Academy website

Plan for the webdesign is to have a simple menu box on the right side of the screen, preferably in a static position.
So whenever you're scrolling though the content, you always have excess to the menu without having to look if there is a 'back to top' button hidden somewhere.

I start editing the index.html file (the hello world test) and change this into my new FabAcademy homepage.


Though I worked with the wysiwyg editor Dreamweaver before, I experienced Seamonkey as being too 'helpful'.
Making my source code looks messy, and I have to do a lot of 'cleaning up' to get it a bit more readable/logic.

printscreen-8



  • Good tutoral for setting up a very basic homepage with menu : http://www.w3.org/Style/Examples/011/firstcss

  • A very helpful eyclopedia about css and html : http://www.w3schools.com
  • A good forum where you can find and post programmers questions : http://stackoverflow.com

In stead of copying my menu to every page and edit the links by hand, I would like to have the menu in one file and be distributed to the rest of the website.
I know the old fashioned way of working with I-frames, but my tutor suggested I should look into jquerry as a modern solution to the problem.

A question posted about how to include another HTML file in a HTML file. (loading content): http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file
and about how to set up jquerry: http://www.w3schools.com/jquery/jquery_install.asp


printscreen-11

Following the guideline of the 2 links above I tried to get it to work.
After going trough it with my tutor we noticed that some changes we deliberately made, gets auto-completed/corrected by Seamonkey again.
Really frustrating... so time to stop using Seamonkey.

Switching to Programmer's Notepad.
My first impression of this editor is the use of color, which give's a better overview of the code.


Second attempt to get the jquerry menu to work, but 2 errors keep occurring.
Google croome apparently is very strict in allowing local files to load.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.


Don't know how to fix this I let's try a other solution :
http://stackoverflow.com/questions/19821753/jquery-xml-error-no-access- control-allow-origin-header-is-present-on-the-req

New solution to the same problem, but using javascript :
htthttp://stackoverflow.com/questions/8988855/ include-another-html-file-in-a-html-file/15250208#15250208


printscreen-10


And it works!

I can now finish the layout, upload my content, and push the files to the server.



printscreen-9