In my previous post I said I would do a Git tutorial. It’s been a little while, but here it is. This will be a very brief guide, intended to get you started straight away. So, onwards!

The basics

git config

First of all you should set up your Git installation with your name and email:

git config --global user.name "Your name"
git config --global user.email "name@example.com"

git init

In any directory, with or without files, simply type git init to start a repository there. No other set up needed.

git status

When you have some files in the directory type git status. This will show you all the files that have changed and are untracked. (In any version control system you need to ‘track’ files you want to keep versions of.)

.gitignore

You may see some filename~ files. You most likely don’t want to track these, so type nano .gitignore, and enter ‘*~’ (without quotes). Press Ctrl+O to save, and Ctrl+X to exit. The *~ wild card will match any files ending in ‘~’, and cause Git to ignore them.

git add

Use git add filename.txt to start tracking your files. For example, you will want to add the .gitignore file from above, so type git add .gitignore. You will generally want to track all your source code files but not compiled ones, such as .class for Java. In fact, you can add *.class to your .gitignore file to make sure they don’t get added.

git commit

Finally, you can type git commit -m "Commit message here" to commit your new files.

The big difference

Unlike other version control systems, with Git you have to add files you want to commit to the ’staging area’ before committing. This means that each time you want to commit some changes, your work flow will be something like this:

$ git status
# On branch master
# Changed but not updated:
#   (use "git add ..." to update what will be committed)
#
#       modified:   test.txt
#
no changes added to commit (use "git add" and/or "git commit -a")
$ git add test.txt
$ git commit -m "Made a change"
Created commit 2efe3ce: Made a change
 1 files changed, 1 insertions(+), 0 deletions(-)

Alternatively, you can use git commit -a -m "Commit message here" to commit all of your tracked files.

Basic conclusion

That’s all you really need to know to get started! One final recommendation is to install Meld, a fantastic visual diff program, which will show you all the changes you’ve made since your last commit. To install type sudo apt-get install meld. And then in your Git repository type meld . (note the trailing dot meaning ‘use this folder’).

There is of course much more to Git, such as branches and pushing to remote servers, but I’ll finish this introduction here and, depending on the response and persuasion I get, possibly write a further guide in the future.

Firefox Add-ons

I use several add-ons for Firefox to make my life easier:

Firebug

Undoubtedly the most useful plugin for checking and editing styles on all the elements in the DOM, Firebug is indispensable for quickly discovering problems in your HTML and CSS. If there’s one add-on you download it should be this one.

Web Developer Toolbar

Another useful add-on for examining the layout of your webpages, you won’t fail to find something useful in the multitude of tools it provides. The ability to quickly switch off images and JavaScript is a great way to check your pages degrade gracefully.

HTML Validator for Firefox

While the Web Developer Toolbar allows you to quickly validate you HTML against the W3C validator, sometimes it’s not quick enough. This extension validates your pages locally and displays an icon in the bottom right of your window showing whether your page passes. It then provides an easy to navigate list of errors linked to the lines of HTML in the source code view, so you can quickly track down problems.

I recomend switching its “Enable validation in the Browser” option off, and then adding exceptions for your development sites (such as localhost), so that it doesn’t impact your general browsing experience.

Libraries and Frameworks

It always helps to have a solid foundation to build a web page. Here are some that I use:

jQuery

jQuery is my JavaScript library of choice, providing one object that accepts CSS selectors, HTML strings, provides DOM manipulation and animation and has a robust and well used extension system. I have also heard good things about Dojo, and of course there are many others out there including MooTools and Prototype.

960 Grid System and Blueprint

Recently I have become a big fan of the 960 and Blueprint CSS frameworks. My productivity has shot through the roof as I can now layout pages quickly and easily without worrying so much about cross browser compatibilities, as these have been solved by the framework authors. Instead of marking up your pages, and then styling them, these frameworks allow you to put classes such as “grid_4″ to create perfect columns of content. Afterwards you can add IDs to style the elements as you wish, but the layout is done for you. This means that you sacrifice some semantics, but if this really bothers you then just think of these tools as ways to rapidly prototype ideas.

Personally I prefer 960.gs for it’s simplicity and flexibility with its 12 and 16 column options (compared to Blueprint’s 24 columns!), however I find its typography (text.css) a bit lacking, and so I generally use Blueprint’s fantastic typography.css. One thing I do change though, is to bump up Blueprint’s default font size, which I feel is a bit too small.

Font stacks

Following the rapid prototyping path, I like using the above font stacks (article here) to quickly apply fonts to a page that look great on all browsers and platforms.

Other tools

Of course there are several other tools that aren’t concerned with just web pages:

Multiple IE

Internet Explorer is the bane of every web developer’s life, but it’s so widely used that it cannot be ignored. While Internet Explorer 7 and 8 are the current versions of IE, a large proportion of businesses still use IE6, which will always mangle your design (don’t leave testing in it ’till the end, or you will have your work cut out). Multiple IE is the best way to install old versions of Internet Explorer, while still maintaining support for conditional comments and the various IE PNG fixes. I personally only test IE versions 6, 7 and 8, but this tool supports back to version 3.

Synergy

I run Windows on my laptop with all the different browsers, and develop on my main computer with Ubuntu. Synergy (which can be downloaded here), while not strictly a development tool, makes my life easier by allowing the main computer’s mouse and keyboard to work across the network on my laptop. The exchanges awkward leaning across and using the laptop’s track pad to just moving the cursor against one side of the screen and it appearing on the laptop.

For Linux users, this should be available in your repositories (e.g. Synaptic for Ubuntu)

Version Control System (VCS): Git

Version control should be used whenever you are dealing with code…or really anytime you are creating digital files. Not only does it allow you to easily go back to a previous version of your code/file should you completely mess up your working copy, it is also an easy way to make backups and transfer the latest version of your work to whichever computer you happen to be working on. There are many different systems:

• Subversion: Established, with good tools surrounding it, but now getting outdated as people realise the ease and value of distributed systems
• Bazaar: A distributed VCS written in Python which can be used over SFTP. Personally (seriously, opinion no fact here) I’ve found it to be a bit slow, but your mileage may vary
• Git: My personal favourite, Git is being used by the Linux kernel and many other projects. It also has the great Github behind it. It can be slightly hard to get used to (I hope to write a tutorial soon)
• Also: Darcs and Mercurial, neither of which I have used.

For Linux users, all of these should be available in your repositories (e.g. Synaptic for Ubuntu)

Conclusion

I hope this is a good introduction to some useful tools. I will keep it updated as I think of more that I use in my work-flow, and if you have any suggestions or questions, please comment or email me!

Ingredients

• 12 pack of streaky bacon (preferably thin cut)
• A little lettuce (there’s not much room inside the bacon roll)
• Half a tomato (ditto)
• About 20 minutes

Method

Assembling the bacon lattice was actually very easy, and took only a couple of minutes. Everyone should give it a go at least once.

The innards:

Ready to go into the grill:

And a quick flip of the board gets it on there with only a minor disturbance at the top of the lattice:

Giving the meat a quick prod

And the assembly begins. There’s surprisingly little room inside the rolled bacon, thinner cut stuff would probably be better

A soldier of bread is added to complete the taste of the classic BLT.

What heart attacks look like:

The first bite comes with an unfortunate amount of cocktail stick, and Nick fills his mouth with meat. The soldier of bread does nothing to make it taste like a classic BLT.

The going gets tough:

Conclusion

Overall the construction went well, although it was difficult to get much inside the bacon roll. While the tomato added a light sharpness to the BLT, it pretty much just tasted of bacon. The lettuce did add a nice crunch, and if I was repeating this in the future I would use more instead of the useless piece of bread.

The main problem is the fact that it’s now almost three hours after I ate it, and I’m still feeling a little bit ill.

7/10

Further bacon lattice research is required.

When I saw the above (left) advert in the student newspaper I was immediately struck by how appalling it was. I knew I had to redesign it (right).

On an informational level, the date of the performance, something a prospective audience member would probably like to know, has been reduced to a subscript. And on the design front, well… there are many, many things wrong. Look at the jaunty angle both the “The View” and the competition info have been placed. It adds a bit of interest but the different angles the two pieces of text have been placed at, falling into weasal words, feels wrong. I can almost believe that the designer may have had some training, as the circle provides some focal point to the piece, but that idea is destroyed as soon as you look at how poorly it intersects the text.

Over Christmas I read Grid Systems by Kimberly Elam (which I highly recommend) and this seemed like a good small project to try using the ideas from the book. I wanted to limit myself to the copy and colours used in the original advert. I ended up making two deviations: I used white to change the importance of a couple of pieces of text, and changed the competition copy for a reason I’ll explain later.

The grid is based on the the width of advert, so that there are three columns across the page. This is less obvious at the angle I’ve placed it at, but still helps maintain a relationship between the two.

I thought that “The View”, and especially “View” was getting lost in the location text, and so I broke one of my rules here to separate it by changing the colour to white, and in the process made it more important by making it brighter than the rest of the page.

The date has been made bigger as one of the important pieces on information.

I lost “You could be there” as it added no information to the page, didn’t really fit into the design, and frankly, is an ugly cliché.

Another change I made was the wording of the competition title. I felt the original copy was too long, and I also wanted to use another trick: I wanted the words “win” and “tickets” both at the end of the line so that they would be, possibly subconsciously, linked. This also works well with the 30° angle, as they lie on a straight line down the page.

I had the most trouble with the circle, as I couldn’t get it to lie on the grid without disappearing off the page, and this would ruin its attractiveness as a perfectly round shape against the rectangles of text. In the end I decided to place it on the original non rotated grid to maintain some uniformity. If there’s one thing I’m unhappy about, it’s this.

I hope this has been informative, and if you have the urge to be a bit creative: here’s the SVG. So download Inkscape, and see what you can do.

Yesterday’s post is really just a prelude to this bit of code I wanted to release. In the customisation docs of Roundup is a guide to add a time logging. As a freelancer it is important for me to log the time I spend on various tasks, and I’m sure other people would like this feature to. There’s no point many people making the same changes so I’m releasing my modified Roundup templates and schema here.

In addition to this I find it very useful for the different priorities to be coloured, and so I have included the style.css and a modified item.index.html. I hope someone finds this useful.

Download Roundup Timelog and Priority Colours

A couple of months ago I needed one of these “issue trackers”, as I was having trouble remembering all the things that needed fixing in something I was working on. There are a couple of… famous? … trackers, Bugzilla and Trac. And Bugzilla is crap.

Maybe I should qualify that…

As you may have gathered from my previous post I’m quite “in” to user interface design, and user experiences with software in general. To illustrate Bugzilla’s failings I need you to imagine something. You’ve just found that if you right click in Firefox while eating a clementine then it crashes. So you go to report a bug. Go on, try and report it. Another site to sign up to?! Unless you enjoy breaking things, or are particularly accident prone, then you probably won’t be reporting a bug again.

(As an aside, I think one of the usability problems with the web today is that everywhere wants your email and a password. Users are lazy*, and by building even the slightest barrier between where the user is now and where you want them to be, is going to turn some away. And then there are the practical concerns: I don’t want everywhere to have my email. And if every other site needs a password, then even the best of us are going to lapse into using the same one in multiple places, an obvious security risk. This is the problem that OpenID is trying to solve, but that comes with its own set of problems.)

So you complete the sign up process. In front of you is a webpage. It looks like this:

You are fucked. Now it’s easy for me to criticise. What solutions do I offer? At the moment: none. I’m happy up here on my soapbox. One day I’ll help.

I’ve had no direct experience with Trac so I can’t really comment, but essentially for my needs it is overkill. The search begins for an small open source bug tracker. Mantis suffers similar problems to Bugzilla; this is scary. I could go through the rest but there is one common theme: the user interfaces are appauling.

So how has Roundup got it so right?

Screenshot of Roundup

So slightly scary, I admit. But you can see that we need a title, priority and description. Done. The only bad thing is that more people don’t use it (and that searching for “Roundup something” will get you hundreds of poorly written “Top 10″ blog posts).

It’s easily extensible (as you will see in my next post) but keeps the core simple, so it’s perfect for keeping track of bugs, or just your daily todo list. And it runs reasonably quickly even on something with just a 266Mhz processor.

I really do recomend it for your small to medium to large projects. Oh, and it’s documentation is top notch.

* See also: “All generalisations are false”

I used your website to order a book yesterday, and I probably won’t be using it again.

Here’s why:

• You wanted me to make a new account.
  I know you want my details so you can spam m-, sorry, keep me informed of interesting offers. But what I wanted to do was buy a book, not create yet another password on another site. All you need are my billing address, card details, delivery address and an email address. So just ask me for those and give me an option at the end to save them.
• Adding addresses was hassle
  I entered my billing address (or as it turns out “Registered address”). I then wanted to change my delivery address, so I do. But its changed my billing address as well. So now I realise I have to add an “Other address” and have to go back and enter my addresses again. There’s a reason all other websites use the same descriptions for their data. It’s so that customers don’t have to learn new things for every website. This is the point when I start to mildly dislike your website.
• To set my default shipping address I have to click a cross. Yes that’s right. A big red cross. What do big red crosses mean? They mean delete, remove, cancel. Not “I want this one”.
• While writing the above I looked at my account information page. I don’t know what  you think, but “Alter[ing] your credit card details” has nothing to do with the title “Delivery information”. And again, how do I change my billing and delivery addresses? “Set up frequently used delivery addresses for yourself, family and friends”? At least this is under the correct heading, but look what else we also find here: the Billing-, oh wait, “Registered address”.
• I think I entered my card details at some point, I’m not really sure. I was very confused. Now this is a minor point: On my card the expiry date is 07/09. On your website the expiry date drop down box lists Jan, Feb, Mar… etc. Now quickly tell me the name of the seventh month! Now! Got it? Well done, it is July. But that took you longer than looking down a list of number shapes and seeing which one matched the shape on my card. If there’s one thing you take away from this email then make sure you at least change the expiry date drop down to use numbers.
• So now, I’ve managed to persuade your site to accept my payment details. Fantastic. I leave slightly frustrated. I go watch Aliens with my friends, which to be honest doesn’t help my mood  as I forgot how much of a poor actor the little girl in it is. Damn she’s annoying.
• So now it’s 9:00am. I’m running out of milk and cereal when I check my email. The book is out of stock. Well done Waterstones. You let me buy something you don’t have. I believe this breaks at least one of the basic guidelines of selling stuff. And for your enjoyment here’s a quote from the email:
  

  the publisher has confirmed that the item/s shown below
  are not currently available, but an item request has been placed with
  the suppliers so that we can fulfil your order.

  Tell me, if the publisher isn’t publishing how can the supplier supply?

If there’s one good thing about your site then it’s that I could cancel my order easily. The other would be that it looks pretty. But that doesn’t help you much when I’ve just ordered at Play.com and vowed never to return to your side. And I’ll probably moan about it to my friends as well because a) How can such a large book chain fail so badly at selling books b) I’m a vindictive bastard.

And now I’ve spent over 45 minutes writing this email. Brilliant. I hope you appreciate this.

Regards,

Stu

In the mean time here’s something that’s useful: How to hide text using CSS while maintaining accessibility . This is something I come across quite frequently: a design specifies that there should be a lovely header image with a bit of fantastically inaccessible text. So the text goes in the markup and we use CSS backgrounds to replace it. The words need to go somewhere, and we can’t <span> and display:none it, or screen readers ignore it, leaving us back where we started! We need to use some other CSS properties.

There are several ways to move the text off the bounds of a page (and probably many more than this):

• position: absolute a tag containing the text off the page
• Set text-indent to a very negative number
• Set line-height to a very big number

These all push the text outside of the viewing area. The only problem is if used within a link, the browsers’ default styles draw a dotted line all the way around the link element, making the dotted box extend off the page. A small price to pay for accessibility in my opinion.