Loes Bogers

FabAcademy 2015

Week 1 - Project Management:

Assignment: set up a HTML page, learn to work with Mercurial, conceptualize a final project

HTML and CSS

I started out creating a quick and dirty webpage in dreamweaver because I've used it before and wasn't sure how long it would take me to also get a grip on the version control this week. Because the version control was not too bad, I decided to dive into HTML and CSS a bit more because Dreamweaver makes a code mess.

I worked through this tutorial by OpenP2PDesign, explaining the basics of HTML and CSS using the software Brackets. No faking it here, it only allows you to modify code, you can't manipulate the layout graphically. I tried to keep the document as tidy as possible by paying extra attention to keeping stuff in the .css and to avoid formatting in the html pages.

For sure I will need to go more in depth later but this seems like a clean enough webpage (front and back). I didn't manage to also get into Bootstrap to build a responsive site that's all up to par with the latest standars. BUT, my content does scale with window size and it looks fine on mobile as well. Thank you Stackoverflow.

Embedding iframes (vimeo vid)

Something else I found later on when I was working on my final project page: embedding vimeo with iframes didn't work. It showed a grey unhappy face when I used the regular embed code provided via Vimeo. I found this workaround - just add https: in front of the URL it worked, magic!

Applescript to resize batches of pics

Because we have to limit the size of our repositories to a minimum I looked up a way to batch resize images to a predefined size (so you don't have to go through the tedious photoshop process each time). I found this script here. All you need to do is change this line: set the target_width to 1000 by changing the number to your desired width (in pixels). I chose 1000px because most images won't be viewed larger on screen anyway. Save the code as an application and keep it in your dock. If you drag pictures onto it, it saves a resized copy of the file in the original location.

Version Control: Mercurial, VIM and the lot

Started with a basic Mercurial tutorial (rhyme!) here

setting up config file with username I just used Textedit to create a plain text file (cmd+shift+t for plain text) to create a .hgrc file with this info

[ui] username = John Doe

and saved it in my root folder as .hgrc

unticked the "if no extension is provided, use .txt" because I want the extension .hgrc
if you try to change the name into something that starts with a dot from Finder it will refuse to do it. Save it from the texteditor.
checked in terminal whether it was there. Used command
$ ls -a to show hidden files

Then walked through this tutorial to get familiar with basic Mercurial workflow:

First I checked if there was a .hg file in the folder academy.2015.europe that i got from pen drive using
$ ls -a
command in terminal. There was. Then I tried a first commit by doing this:

moved my stuff into my personal folder
had to reassign root folder of my dreamweaver project because of the move
Tried adding and committing files (checked file size first)
noticed that in order to add a comment to a commit, it sends you into VIM (terminal's text editor). Looked into basic commands for VIM.

Useful VIM commands

i = change to input mode (so you can start typing)
u = undo
esc = to escape input mode and start using commands (on the bottom)
:w [enter] = write/save
:wq [enter] = write & quit
:x = save and exit (same as above)

you can avoid the whole VIM thing by adding -m to the hg commit command

$ hg commit -m "insert comment here"

This lets you add commit comment directly from command line

HG commands & workflow

FIRST: Check filesize
hg add [drag file directory into terminal] (to list files to add in the next commit)
hg commit (and then add comment in VIM)

hg commit -m "insert comment here" (to avoid going into VIM)
hg log (to check recent changes)
hg log -v (for a log with more info)
hg remove (to list deleted files for removal otherwise it will give problems)
hg log --graph | less (shows a somewhat visual representation of the version history)

Useful terminal commands

I found some handy ones here. Below are the bare necessities.

help = displays partial list of bash commands
man = open manual
ls = Lists the names of the files in the working directory.
cd directoryname = Changes the working directory to the one you named.
cd .. = Brings you up one directory level.
cd = Returns you to your home directory.
pwd = Displays the pathname of the current directory.
mkdir newdirectoryname = Makes a new directory.
rmdir directoryname = Removes (deletes) an empty directory.

Working with files in command line

cp filename1 filename2 = Copies a file.
chmod = Changes permissions for access to a file. Study the man page before using this one.
diff = Compares two files line by line (assumes text).
more filename =Displays a text file one page at a time. Press the spacebar to see the next page; press Q to quit. The man command works through more.
mv filename1 filename2 =Moves a file or changes its name.
rm filename =Removes (deletes) a file.

Looking into MacHg (GUI for Mercurial)

This is a version control program with a GUI.

used the bottom left + to add the local repository
it shows the filestructure of it, and marks which files - if any - have been changed.
select modified files and go to menu Action > Add Selected Files
then go to menu Action > Commit Selected files

For the basic operations I did today I don't see much added value except that it was easier to commit removed files, this was a bit harder in the command line. But in the future if I start working with parallel test versions of code it might be a bit more easy to oversee the structure using this