First of all, a few parameters. I have used the term web developer/web designer to cover anyone who is starting out in the web arena. You may have aspirations to progress into a programming role, a design role or indeed a mixture of both or even some of the more specific roles like information architect, user centric designer, experience designer. Regardless of which path you take you will all need a firm grounding in HTML and CSS, and regardless of which path you take these skills will be invaluable on your journey.

Attention to detail

By far the most important of these , particularly in relation to writing HTML and CSS for the novice developer/designer, is attention to detail. This is particularly important for the brave of heart amongst you who will embark on this journey armed only with a text editor, and I would highly recommend this approach. It is all very well to be able to drive your fancy new WYSIWYG, but what are you going to do when it breaks down and you have to go tinkering under the hood. Take it from me, learn how to hand code. It will be worth the endless hours of heartache and pain.

• Check every line of code
• Make sure opening and closing brackets are there on all HTML tags
• Make sure all opening and closing HTML tags are there (remember some tags are self closing <img src="" />)
• Make sure all your equal symbols are there
• Make sure all your quotation marks are there
• Make sure you have spaces where there should be spaces and none where there should be none.
• Spell check and proof read your all your content
• Check all your links

Now might a good time to go and find yourself a checklist of all the things to check as you go. I could provide links but as you will see from the next points it is upto you to learn how to learn. So start now.

Ability to teach yourself

Again I cannot emphasis the importance of this enough. In order to progress in this field, probably just like most others, you must be prepared to learn new skills and enhance and improve your current ones. You must be able to motivate yourself and spend as much time as you can, getting to grips with and keeping up with the ever changing industry standards, benchmarks and techniques. Don’t expect to progress if you cannot. There are more than enough sources of information, insight and tutorials online for this purpose. Learn how to use google, read blogs, subscribe to RSS feeds, listen to podcasts and watch tutorial videos. Welcome to the Worldwide University of the Internet. This is self learning or no learning time.

Ability to develop good problem solving and bug solving techniques

You will, and you can be sure of this, very early on in the process of learning HTML and CSS come up against problems. It is vital both for your sanity and your ability to meet a deadline, that you develop skills to be able to deal with these problems. Arm yourself with as many tools as you can, Chris Pederick’s Web developer toolbar is a good place to start, and learn how to use them. You will find them invaluable. Remember the importance of validating your code, I refer back to attention to detail, which cannot be overstated enough. ( I have lost hours as the result of missing “=” signs or quotation marks).

Establish a process you can go through, with any HTML , CSS problem to get to the bottom of it. the first step in fixing a problem is finding the cause. I personally use some or all of the following when working with layouts problems for example.

1. Validate your HTML and CSS to make sure you have not done something silly like remove a starting tag and forgotten to remove the ending tag
2. Apply a background colour to all block elements on the page, making sure all colours are different. This gives you a great insight into how all the elements on the page sit in relation to one another.
3. Some people swear by using borders for the same reason, to display the layout of each element, although I always found the extra pixels could throw pixel based layouts into disarray. (You mean you haven’t studies the Box model yet, why not!
4. You can achieve a similar effect using the web developer toolbar, in particular the outline drop down menu

The important thing is to develop these techniques early on and be able to pull them from your armoury if and when they are required.

If you can master these 3 skills you are well on your way to becoming a better web developer/web designer.

• Simplicity, easy to use and compact
• Platform/Browser compatibility
• Good documentation
• Extensive community – I need something with some longevity and plenty of resource driving it forward
• Readily available examples of implementations – again a large community helps
• Good range of plug-ins for day to day development requirements – remember why I need it in the first place
• Something that assists me in my job of creating better user experiences on websites – Is it used by people of like mind
• Unobtrusive – easy to implement in an unobtrusive fashion
• Easily updateable , preferably no maintenance on my part

I am not an accomplished programmer, so I am less interested in whats under the hood and how it is all implemented behind the scenes and more interested in how these clever and talented programmers have provided me with a useful tool for web development. With this in mind I do hope that one day I will be able to grab the basics and use them to create my own useful components. The fear being that I become an accomplished googler and a magpie excelling at stealing other peoples work and not creating any of my own.

Who are the contenders?

For me I think it is between two, namely; jQuery and mootools

jQuery

jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery achieves this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

Mootools

mootools is a very compact, modular, Object-Oriented javascript framework. Its unique design makes it extremely crossbrowser, easy to use, and a snap to extend with your own code. It comes with a choice of more than fifteen scripts, plugins and add-ons

Whats my verdict

I wouldn’t look beyond either of these two. Both have great documentation, I particularly like visualjquery as a quick reference

I am currently in favour of JQuery and plan to stay so for the foreseeable future unless mootools pulls something out of the bag. I hope that jQuery integrates nicely with CakePHP which is to be my new endeavour…or one of them.

If anyone has any other suggestions I’d like to give them a look.

In laymans terms (what you mean you’re not laymen?) it basically means ‘tagging’ a photo or a blog entry or any entity really with a some meta data pertaining to its geographic location. Yes I know that wasn’t really laymans’ terms but sure you all claimed not to be laymen! Ok the simple version you can now let people know where you took your photos on Flickr by placing them on a map – waaoohh

Geotagging your Flickr photos then and now

Up until today it was possible ,with the aid of this helpful little bookmarklet (follow link and drag to your toolbar if you want to use it but read on first! you may need firefox for the bookmarklet) for example to add geotagging info to your Flickr photos and link to them on a google map.(note the google map is way better than any other for our little island, much more detail.

As of today Flickr have added this functionality to your Flickr using Yahoo maps, which makes sense seeing as Yahoo now own Flickr! The maps aren’t as detailed as googles effort but they still do the job nicely. The interface is fantastic and couldn’t be easier to use. Just go to your ‘organize’ tab where you will notice a new tab at the top called ‘Map’. Click it and off you go. you don’t need to be told how to do it, you can work it out for yourself, its all drag and drop and follow the prompts. You will probably start to notice on further inspection the mention of maps in a few other dropdown menus and tabs and places. Have Fun.

Update

Try out zooomr which also does geotagging, in fact they got there first. They seem to be affiliated with google. They offer a wide range of features for both free and pro accounts. You can actually get a free pro account for a year by posting one of your photos on your blog. Find out how here

174973500_4dcf1b9866_o Hosted on Zooomr

We now have, and I’ll be brief, vastly improved CSS support including @import and media type. We have support for AJAX!, RSS and tabbed browsing with close icons, all the main stays of the modern browsing experience. Oh and did I mention automatic updates, CAB installer or exe via active sync. We have nice bookmarks management, Good useability features like text size switching, find on page feature,variuos layouts, single column, desktop layout and panning. So now I may actually try a little harder to do truely cross device versions of my websites, heck at this rate in a few more months it may be worth it. I will certainly be more inclined to use the iPAQ to casually surf the internet.

You can download the windows installer or the mobile cab installer here.It just goes to show how far the project has come that it has its own page on Mozilla, I used to have to trawl server directories to find the nightly builds. You knwo I think this time next year it will be standard on all mobile devices…

Never really though much of personality tests, but I must applaud the superb UI of personaldna by attap who have put together some lovely web apps. I approve of their philosophy and outlook for the web. (They can all rest easier now!)

I think a short list of web 2.0 apps is in order, with or without a critique, depending on if anyone wishes to contribute. Before I start, for all the geeks out there, yes I will be mentioning all the usual stuff, but for some of you this may be new and exciting and worth a visit. Have a look anyway, see for yourself and be your own judge.

The ones I use regularly at home

• Flickr - no list would be complete without it, for all your photography sharing needs
• Gmail – the new hotmail
• Delicious – online bookmarking, tagging app
• Measuremap – fabulous tracking stats for blogs
• rollyo – custom build search engines
• netvibes – loving this combines loads of the others

The ones I use regularly at work

• Basecamp – project management
• Delicious – online bookmarks

The ones I have used but not returned to

• web2.0validator – a bit of fun
• writely – an alternative to 37signals writeboards
• odeo – all things media
• backpackit – little brother to basecamp, good for lists and organising
• shutterbook – alternative to flickr
• digg – social news aggregator
• rememberthemilk – another tada type list maker. Nelly take note!
• Rojo – online RSS reader and sharing app

The ones I will be using regularly when the necessity arises

• Anything by attap – keeping my eye on these guys, great stuff
• script.aculo.us – special effect javascript library
• linkedin – networking tool

The ones I have yet to try

• sidejobtrack
• mypimp –
• pxn8 –
• conversate –
• mailchimp –
• time-tracker –
• listal –
• youtube –
• vimeo –
• goffice –
• serversidewiki –
• meetup –
• goovite –
• joyent –
• merchboss –
• backbase –

Improvements

• Better and more intuative organisation of features.
• Reimplementation of online and offline validation tools.
• Improvements to and more variety of outline capabilities.
• Miscellenous Goodies, including small screen rendering, linerize layout
• Greater scope when displaying information, even more at your fingertips
• Realtime editing of HTML and CSS
• More complete manipulation of images
• All the old favourites, mostly improved and optimised

Uses

• Final Checks, Images, Accessibility, Validation.
• Measuring and checking layouts.
• Debugging CSS layouts.
• Simulating test environments.
• Gathering information and researching during web browsing.

Just a quick note to say, perhaps ,dreamweaver does a better job of these sitewide checks at development stage, but on a page by page basis perhaps after you have moved to staging server this takes the biscuit.

A must for all web designers and developers. I couldn’t recommend it enough

Did Chris leave anything out?

Well aside from a “create lovely website button using web standard techniques and wake me up when you are finished” button! I think he has it pretty much covered. Perhaps a generate lorum ipsum would have been useful, but with the likes of display line guides and display ruler he really has surpassed himself. Creating Web Standard sites is such a breeze with this extension in your arsenal.