Start using Git fast
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"
Published in categories: Code
Tools for web development
So, I thought it would be useful to give other web developers an idea of the tools I use when building websites:
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.
Published in categories: CSS, Code, Design, Grids, Internet
The Bacon, Bacon, Bacon, Lettuce and Tomato Roll
After reading about Meat Sushi (linked from the wonderful B3ta) I’ve been hankering to make a bacon lattice. The time finally arose and it was decided to make a BLT, but with the bacon on the outside.
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
Published in categories: Food
Grid design
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.
Published in categories: Design, Grids
Roundup Timelog and Priority Colours
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.
Published in categories: CSS, Code, Python
The perfect small issue tracker: Roundup
All software products have bugs, and we need a way to keep a track of them.
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…
Published in categories: Code, Python
Don’t use Waterstones.com
Hi Waterstones employee,
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
Published in categories: General, Internet
A new blog, and how to hide text with CSS
What’s this, another blog? Just what the Internet needs! Please forgive me while I create a decent theme.
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: absolutea tag containing the text off the page- Set
text-indentto a very negative number - Set
line-heightto 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.
Published in categories: CSS, Code, General