I am a delicious lover… I have been using the service since it was released and I have thousands of links bookmarked and still use it everyday. I consider it to be a fantastic tool for the pro blogger and if you use it to its full potential you can update your wordpress site and keep your content fresh everyday using the links you tag whilst you surf. I utilise this technology on the front page of adamskee.com.

Here on the adamskee.com site I use multiple RSS feeds on the front page. The design and css feeds are directly coming from my delicious page. When I am surfing and I see a page/site that I would like to add to my site I merely press a bookmark in my browser add a description text and this post appears on my site. Here is the process and explanation on how to achieve this.

Firstly, head over to del.icio.us and set up and account, it is free. Then you need to set up your button(bookmark) at the top of your browser for 1 click addition to your site. The easiest way to do this is to book mark any page then change the properties of this button to your delicious info. The image below shows the properties of my bookmark/button.

In the description above you can see that my account is called “motherdigital”, this is the only code that will need adjusting, just change it to you account name. Now if it is all set up properly you will have a button/bookmark at the top of your browser that when you press it will automatically post your page with a description tag (you fill this out) in your delicious links.

Now, you have your delicious links all working and you want to get your feed into Wordpress. There are a few plugins available to do this but I recommend BDP RSS Aggregator, it has by far the most options for stylising your links and total control over the feeds coming in. The process in setting up your RSS to display in your content area is quiet simple.

1. add the feeds you wish to provide on your site - multiple feeds can be entered as a comma separated list
2. create/update the output format that will be used to output the feeds collected
3. set/change the feed capture attributes that will be used to poll the listed feeds
4. place a call to the BDPRSS2::output(n) function (for example) in your side bar, where the argument ‘n’ is the output format identifier.

If you are using the feed in your content area then you would call the function by using this syntax:

The number 3 relates to the feed number created by the plugin. Also, very importantly if you are calling the plugin from the content area you will have to use the plugin Exec-PHP, which allows you to use tags inside your content area. BDP RSS will not work inside the content area if you do not use Exec-PHP.

Once you have all this set up you are basically done, all that is left is a bit of CSS to stylise the feeds and lotsa surfing and adding links to your delicious account. Before you know it you will have lots of content in your blog that is updated every time you save a delicious link.

I know that this title will offend at least half of the web developers out there and they are muttering to themselves that they love Dreamweaver and the true die hard will swear that note pad (or some notepad style software) is the true coders path to enlightenment but let me tell you, I have been both those developers and I have moved on to the next level of design nirvana…Let me make it clear, i still use Dreamweaver and NotePad2 as my start to just about all projects but its the last 50% of the project that has changed. Utilising these plugins you can tweak and optimise your code to a very high standard in a much less amount of time.

Firstly, let me state that I am no HTML hack, I have been doing web development for over ten years and know just a bucket full of coding languages and now design interfaces, intranets and sites for government departments and blue chip companies. In this high level corporate/government world the customers are extremely hard to develop for. EVERYTHING you develop has to work on all platforms and be 100% accessible and look nice….these are not requests by the client, but often government mandated regulations put in place for the general public.

I feel that I should let everyone know, I live and work in Australia where regulations may be what we say are excessive. We often use the example of the Sydney Olympics Web Site from 2000 that was developed by a local company for the Australian Olympic Committee. The Committee and the development company were successfully sued by the disabled person for a six figure sum because the site was not accessible to them and by law it had to be.

Ok, enough background.. with the advent of Firefox and Opera and the huge advancements in plug-in development there have been some massive leaps forward in the tools that are available to us for development. Personally I think there is nothing more helpful to me than been able to develop live on the page I am creating. I can edit CSS and see the changes live in the browser window without ever having change between screens or even press a button and I can also develop html in the same way.

“Aardvark” | is by far one of my favourites. Simple, clean and super easy to use. It can be used for cleaning up a page prior to printing it (by removing and isolating elements), for making the page more readable, and (most appreciated by web developers), for analyzing the structure of a page.

To use Aardvark, just right-click on the page and select “Start Aardvark” from the popup menu. As you move the mouse over the page, you will see a red rectangle around the current block element, along with a label showing its type, and if they exist, its id, class, and style. You can then press various keys on the keyboard to do things, for instance W to navigate wider (as shown in the image), R to remove the element, I to isolate the element (that is, remove everything else on the page), V to view formatted source of that element, U to undo, Q to quit aardvark, and H for help, that is, a list of the 12 available keystrokes.

“Xray” | is very useful at the right time Once installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page. The below screen shot shows Xray in action.

“IE View” | IE View is a simple Mozilla and Mozilla Firefox extension (for Microsoft Windows systems), which allows the current page or a selected link to be opened in Internet Explorer. I use Firefox 99.99% of the time, but there are those moments — particularly when testing new pages, or when viewing that rare IE-only page that’s actually interesting — when I need to see what things look like in IE.

IE View adds menu items to the page context menu, and the link context menu. Right-clicking a link now includes an “Open link target in IE” menu item. Right-clicking elsewhere in the main body of the page (not within an image, text box, etc.) gives “View this page in IE.” .The screenshot below shows the menu on "right click".

“Web Developer Extension” | The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux. It is the main development tool in my toolkit and is the cream of the development tools cake. It lets you do just about everything to design, code, clean and test web pages. I can’t live without it these days. Use it with Aardvark and you are design hero.

These plug-ins by them selves are fantastic but when you use them with each other they become a powerful team. I find that using Aardvark while having the CSS column opened on the left of the screen I can quickly identify divs and classes with Aardvark and make those changes with the “Web Developer Extension”. The screenshot above shows Aardvark displaying the div class and the Web Developer Extension and on the left, you can make a live edits to the CSS and see the results realtime in the browser.

About the only machine/browser I need to test on that isn’t covered above is the mac using safari and firefox. And a lot of the time I find problems here and have to redevelop certain areas of the interface. It would be nice in the future to be able to test the mac environment virtually on the PC within the “Web Developer Extension”.

To finish up…There are many other plugins/tools on the market that are freeware/open source/shareware do the same as the ones i have described above, you need to find which tools work best for you and build your toolkit accordingly, and next time you have a hard to deal with client who keeps changing the UI sit them down next to you and crank up your tools and watch them become amazed at your skill of creating a site look and feel in front of them (Warning - showing this to some clients can have the opposite effect..)