lewro’s blog - 2.1 - web designer beginner

What is subversion? Subversion is a software which allows you to create archive of your source code where you can clearly see what and when has been changed and If you need to you can still use previous versions of your code.

Why and when it is useful?

It is mainly used by developers working on the same project who need to access the same source code files. Every developer can access the actual version of every file. Whenever the changes has been made the developer commit the changes to the source so the other developers can access the code including his changes. You might be asking, what if I work alone on my project? That is actually my case here. I still use subversions because it allows me to go back in the history of my code and see changes which has been done and if something goes really wrong I can use the previous version of my code. Another advantage is that your different versions of the code are your backup files as well.

What do I need?

• Subversion software (software which keeps track what has been changed)
• Subversion user interface (it is not necessary but it is lot more comfortable then using command line)
• Repository - the place where you store your files (versions of your code)

So here are the simple four steps which has to be done.

1. Install subversion 1.4.4. http://homepage.mac.com/martinott/
2. Instal svnX which is GUI http://www.lachoseinteractive.net/en/community/subversion/svnx/download/
3. Create account in Google Code http://code.google.com/
4. Fix the certificate problem with SVN list. Use your user name and psw from google repository when executing this command in command line
   

   svn list https://whatever.server.com/repository

There might be a new version of SVN when you read this article so take the most recent one. User interface - SVNX I am using here is beautiful application with easy to use interface. Repository - I have chosen here the Google Code as my repository. We could chose different free server but I use google applications a lot so I am going to stick with google.

Everything installed, what is next?

1. Create working copies - path to your projects on your computer
2. Commit everything to the repository. Just double click on working copy and click Commit. If it does not work try to create the folder in the repository yourself and drag and drop the files from you machine into the repository window (in the bottom section directly into the folder). You might need then remove the files from your machine and press update to get the actual version from remote server (which is at this moment the same so nothing will be lost but to be absolutely sure make a backup….just in case)
3. Whenever you change a file it should appear in the working copies. Just press Commit and file will be updated in the repository

How can I see what piece of code has been changed in 2 different versions of my code?

You can check the changes in the SVNX or directly on google code web site. If you just want quickly scan and check 2 versions of the same code go to the google code site and you will find that you can see 2 windows next to each other and the changes are highlighted with colour so it is very easy to spot the difference.

If you want to have some idea how it looks you can check my repository on google code - http://code.google.com/p/lewro/source/list, you can see all my new blog source file and the changes I have made. It is also a good source of information for new developers so you can learn from other people’s code.

Today I have decided to share with you the way I code in dreamweaver. If you thinking about coding practice that is not what I am about to show you. There are no questions for me in terms of coding. It is strictly semantic markup but as a designer I like when thinks looks pretty. Whatever I do I like to keep it simple, organized and pretty.

I played a bit with various dreamweaver functions that day and I have discovered the possibility to create your own theme for coding view. It is always very useful to create a nice working environment because it motivates you and stimulates your creativity process. If you are that type of person who walks around with open eyes watching colour combinations, grid systems, patterns in your daily life you probably will understand why it is important for me to keep my working area interesting and motivating. Anyway, no more talking let me show you my coding view in Dreamweaver. You can see on the first image the css code and the html code on the second. If you are interested what colours I have used here they are.

CSS Colours

• import: #002142
• media: #003366
• comment: #969696
• important: #99CC00
• property: #00356A
• selector: #99CC00
• string: #0071E1
• value: #42A0FF

HTML Colours

• anchor: #99CC00
• atribute value: #42A0FF
• comment: #969696 I
• form: #99CC00
• image: #99CC00
• table: #99CC00
• text: #0071E1

I was also thinking about changing the font type but I have not found anything which would be as readable as the default font - Courier New.

If you guys had the same idea using different colours or font types please send me a link to your code view image. I would be very happy to get inspired by your ideas. Thank you!

You may have noticed from my work that I am a big fun of semantic markup. So let’s go straight to the point. When you write semantic html you should always avoid inline scripting and use external scripts instead. The same logic should be definitely used for your CSS as well. If you are on the web standards boat this is no news for you. For all of us who are hooked on web standards this might look like: Hey guys is there any other way? but actually most of the web creators do not think this way. We all wish they would but unfortunately it is not the case yet. There are many reasons why it is like that but let’s not to talk about that right now. For all of you who do not know how I would like to show how to implement progressive enhancement into your web projects.

External java-script

The java-script file should be linked from the head of your html as seen on the image bellow. In some cases web designers link the java-script file from the bottom of the page but that is not an issue here.

Onload function

Ussualy we want java-script fire after the page is fully loaded and for this reason we can use simple onload event inside of our java-script file. Because of the reason we might want to execute more functions when the page is loaded I use the onload function I have found in the Jeremy Keiths book. So let’s see how the function looks like.

So that is all about it. The page is loaded in the java-script is executed.

The next question is: How can I target elements without inline java-script hooks?

Very simple. You will use document.getElementById or document.getElementsByTagName function. So let’s say you want to change the background color of the paragraph with the ID called intro into red when you click on it.

Deeper knowledge

This is just a very simple example but I am sure you got the point. This way you can attack any DOM element and your HTML can stay clear.You can even create html elements on the fly. I use this technique in my blog for the text resizing function.

More examples together with deeper information about DOM-scripting can be found in books:

• Dom Scripting
• Bulletproof Ajax