See a graph of this website

Hopefully it’ll be totally transparent, to everyone, even Google! So all your lovely people who visit my site from Google Image search can still find what you are looking for

I read lots of blogs and tweets during the week most of them always seem to link to a “Top x things that y should know/use” great stuff, but often most of the content is either recycled or explained better elsewhere. The internet is the greenest place on earth when it comes to recycling content. The idea behind this post is to collect some of that information and yes, again, recycle it.

The post is more for my own personal benefit as I’ve been building website for a number of years now and as the dev landscape changes so do the ‘best practises’ and I wanted to note down the ones that I think are important to me, so that I don’t forget them. Hopefully if you are reading this, it might be helpful to you too.

I will look to try and periodically update the post with further useful bits of information. All of the links are saved in my delicious somewhere, but frankly it’s becoming hard to find things even in there with the amount of links I’ve saved. Don’t believe me? See for yourself, www.delicious.com/neon1024

Beaten to it!

Then you are looking for the Google Speed blog. As I was compiling this list of bits and bobs, Google went ahead and released a site which pretty much covers everything here. So thanks to them, well worth a read.
http://code.google.com/speed/articles/

Setup your browser

No matter which developer you speak to everyone has a different browser preference. Me? Mine remains Firefox, despite a rocky relationship between v3.0.11 and Gmail. Anyhow, that fresh install needs a load of extensions to get things comfy again. You can download whole collections of extensions all in one place! Awesome. Here’s what I generally run give or take, http://twitpic.com/8d9l2
https://addons.mozilla.org/en-US/firefox/collection/webdeveloper

Things to do in basic code

Title attributes

Adding a title attribute to all your <a title=”Lemons!”> tags is beneficial from an SEO point of view and also means you can give users more information when they hover, try and remember to drop one in every time.

Google hosted javascript

Make sure to link commonly used javascript libraries from the Google Api’s. They will serve quicker and from a closer server to where ever you users might be.
http://code.google.com/apis/ajaxlibs/

Loading javascript

Put your javascript at the bottom of the page. The browser will stop when it finds a script and go load the whole script. Usually your javascript will be effecting the page once it’s loaded. This means putting your libs at the bottom of the page allows for a quicker page load for everyone, even more so if users do not have javascript enabled.
http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

Compress your javascript

Following on from above, you should always make sure that you compress your javascript once you have finished writing it, making it load quicker.
http://javascriptcompressor.com/

Compress your CSS

Again you can compress your CSS sheets once you have written them to shave precious kb off your site size and load times.
http://www.cssoptimiser.com/

Faster page loading

If you are building stuff, you should be making sure to optimise it best you can using something like yslow. I tend to favour Googles extension more these days though, although you can happily use both!
http://code.google.com/speed/page-speed/
http://developer.yahoo.com/yslow/
http://sixrevisions.com/web-development/five-ways-to-speed-up-page-response-times/

Validate your HTML

You should also be making sure that you are using html validator to ensure you have no errors, there is a great Firefox extension which will validate your code as you build it.
http://users.skynet.be/mgueury/mozilla/

Encode your special characters

Always encode your entities, even standard stuff like £, or even make sure of the arrows and stuff,
http://www.cookwood.com/html/extras/entities.html

Do more CSS quicker!

Make use of CSS frameworks, nowadays you have to write more and more code in the same amount of time, as peoples web experience becomes richer and their expectations higher. I can see the advantages in these frameworks, although I’ve yet to use one in a project, so still learning how they work.
http://www.blueprintcss.org/

Cut down on your HTML

This is a direct steal from a blog post (if it’s you email me for credit and a link) which I can’t seem to track down right now. Less is more. Much more. When building stuff we all put extra bits and bobs into the code to make things work. How many people go through and remove all the redundant stuff afterwards? Honestly. Yeah right. I know I don’t, but this will make a huge difference to your site. Having less code to load means a quicker site and cleaner markup. Try and merge some of your css styles so they are properly cascaded. Try removing some of the wrapping div’s. Keep it clean, lean and mean!

Designery bits

Looking for better Lorem Ipsum

Need dummy text? Look no further,
http://lorem2.com/

Custom fonts

CSS3 bring @font-face and with it the ability to link to fonts hosted on other servers. This allows native custom fonts without having to hack anything or do anything crazy. Supported by most of the latest modern browsers too.
http://openfontlibrary.org/wiki/Web_font_linking_with_@font-face

The idea would be to replace the fonts with an @font-face then implement a check with deprecated down and implemented Cufon to replace that missing font with a javascript replacement.

Okay, so lots of people have heard of sIFR, which replaces custom fonts with flash. Move over buddy, there’s a new kid on the block and frankly he’s awesome. I wouldn’t chose to use anything else for custom fonts these days. Cufon will create a javascript version of the font and write that to the page instead.
http://wiki.github.com/sorccu/cufon/about

Get rid of IE6

Make sure to include something for IE6 users. I know they are a pain in the ass, but there are ways to push them out into the light. Consider a flat IE6 sheet, http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/
or giving them a proper clean styled update notice,
http://ie6update.com/ or http://code.google.com/p/sevenup/

Speed up image loading

Optimise your site. Save your images for web and make them small. There is no excuse not to do this, I don’t care if everyone has broadband, it’s contended so the more people using it the slower it goes, if your site clogs the lines then it will still load slowly.

Put all your icons into a sprite

Use css sprites. A fantastic way to load loads of those fiddly 16×16 icons all in one chunk. Simple to do too and very effective. Don’t forget that you can do hover states in your sprites too!
http://css-tricks.com/css-sprites/

Things to do in PHP

Always comment your code

Comment. Comment. Comment. We all know we should be doing it, but not many people actually do. Hell even in your CSS files, put a nice heading in to collect stuff together, it takes 5 seconds and makes life a billion times easier. I’m totally guilty of not doing this. Really should make an effort to comment all code everywhere. After all you should be crafting code, rather than writing it.

Using a code documentor

If you are commenting your code properly, you can also use /** to start your comment block. This will allow PHPDocumentor to better read and understand your comments.
http://www.phpdoc.org/

Sending email

A recent Twitter poll by @snookca voted SwiftMailer as the best PHP emailer. I’ve tried to make it work, but I feel that it’s a little overcomplicated for most things. I tend to use a simler alternative, such as HTMLMimeMail.
http://swiftmailer.org/ or http://www.phpguru.org/static/mime.mail.html

Improving database performance

If you are using PHP with MySQL then you should be using the newer MySQLi driver. It’s quicker, better and more feature rich.
http://www.dreamincode.net/forums/showtopic54239.htm

Using CakePHP?

See everything everywhere

Always make sure to drop the debug kit into your project when you start working. It really is fantastically helpful and you’ll not have a need to pr() anything ever again. Well maybe sometimes.
http://thechaw.com/debug_kit/wiki/home

Things on your live box

Keeping things tidy

Always keep your server and working folder clean. If you make modifications you should delete the stuff that you are no longer using. This will keep your working folder clean and under control. If you leave it too long soon it’ll be a horrendous mess and this will lead to a depressed web server Plus if you don’t know what it does you can’t really delete it so the problem soon spirals.

In a similar vein, DO NOT, yes this bugs me, under ANY circumstances back stuff up on the server. That means no .bak no .20090527.bak no contact.php2. There is no need. Your online environment is your Noah’s Arc, your clean room, your Mum’s pants draw. What’s in there should only be what’s needed.

Everything else

Version control

So if you delete stuff from your working folder and you can’t back up on the server, how the hell do you corral all these wayward files I hear you cry? Git. It really is that simple. I wouldn’t even really recommend Subversion any more. Git is devilshy confusing and hard to understand but when you master it you’ll want for nothing. Srsly.

Supporting your users

The site doesn’t work. I can’t click Cancel. Blah blah, we all get it. Now you can fight back! Tell them to head to supportdetails.com and put in their email address and you get a nicely formatted email with all the relevant information on it, genius.
http://supportdetails.com/

The end bit

Well, congratulations you made it to the end. If I’ve missed anything or there is something vitally important that really should be on here, or that I should know, please do, by all means, let me know.

If you want to find out where I got most of this stuff from read my tags.

RIMMER: (VO) After intensive investigation, comma, of the markings on the alien pod, comma, it has become clear, comma, to me, comma, that we are dealing, comma, with a species of awesome intellect, colon.
HOLLY: Good. Perhaps they might be able to give you a hand with your punctuation.
RIMMER: Shut up.

Credit

Twitter, tbh. It’s the people I follow on Twitter that are the experts really. Great articles and great developers and designers. So thanks to everyone on there. I’m a big fan of Delicious too, always worth reading the Delicious Popular every day for great articles.

Great! Definitly going to be trying to get this into some apps in the future, especially that date picker! No more lines of date validation for me

http://jqueryui.com/home

I have become one with the great unwashed since last week. Pretty good really in hindsight, gives me a fantastic opportunity to go find a better job and really leverage my skillset to the benefit of another business. Woah, perhaps I have been completing too many forms. Still it’s all good, just a smidgen of sunshine over the weekend and I’ll be happy.

Toying with picking up Ruby on Rails again after my last forray proved entertaining and entirely doable. Must dig out my RoR books and mock up a project to build something in it. Ah, actually there’s an idea as I write this.

I’m now wondering why it’s not dark and realised it’s 7pm. Well I guess that’s the day then, time to cook some dinner and get the kettle on.