Tools of the trade

So starting a new job on Monday I needed to set up my rig with the tools/apps that I have learned I cannot live without.

HP EliteBook 8530w

My new laptop is a HP EliteBook 8530w, I’ll be writing a review and a comparision with my Dell XPS m1530 soon.  First major difference is that it’s running Windows XP rather than Vista. A bonus, many may say, but I do miss quick launching apps with a hit of the Windows key and then typing a few letters followed by enter. Fortunately, there is the free, and brilliant, Launchy to the rescue. Alt-space takes the place of the windows key for firing up the launchy text box which works much like Spotlight on mac.

For web development work I found the following tools invaluable:

1) Faststone image capture - the ultimate screen capture tool, does wholepage, video, page portions and even scrolls a page and captures it as one image. The video feature can also be set to only record a portion of the screen which is great for screencasts or demos where you don’t want a massive filesize or a squashed/compressed illegable video from a fullscreen recording.

2) Browsers - firefox and google chrome were one of the first things I installed. I would have also used IE Tester but this seems to be a bit redundant now that Microsoft have released their own version so I downloaded SuperPreview

3) Aptana Studio - My IDE of choice. I code in aptana for html, css, javascript and PHP. It has great tools and features and cuts out a lot of the nonsense that are in some WYSIWIG editors. It is based on Eclipse and so is Java based and chomps though a lot of ram so you’ll want at least 2GB of Ram on XP and probably 3-4GB on Vista if you are running it along side other ram hungry apps like Photoshop. Has great plugins that allow you to preview your page on iPhone or sync with subversion.

4) Vertrigo - This is a WAMP app by a Polish developer that is free and easy to install. You simply run the setup and you have an Apache server with PHP and MySQL ready to go. What’s great about it is that it doesn’t try to be constantly running on your system. Just fire it up when you need and close it when you don’t. Good idea to install this as one of your first apps as I have had conflicts when installing it on systems with a lot of other apps that may have been using ports/resources that it needed.

5) An IM client. In my opinion Skype had the best IM client for a long time (not to sure about the latest design) but seeing as most of my contacts are on Yahoo/MSN now I opt for the YIM client. I may switch this for Trillion or another all in one client in future but having an AIO client usually means features such as file transfer or group chat.

6) VLC media player - Not only is this the best player because it plays the most formats it is also even better at playing those formats than the native players. This is especially evident when playing HD content. HD MOV/MP4 files natively play in quicktime but even on decent spec systems can stutter at times. VLC plays them smoothly even on low spec systems (I’ve seen Hi-res video playing fine on netbooks with VLC). It also playes flash video (FLV) and supports more obsure codecs like HD MKV, which is becoming the standard for distributing large HD video files.

7) Adobe CS4 - no getting round it, although the price tag seems ridiculous and there are some alternatives out there, a serious designer/developer will almost always end up with Adobe software. I’ve given up fighting it and fortunately so have finance so will be getting CS4 installed shortly.

Firefox Plugins - The list of must have plugins seems to have shrunk as I find I am using the same small list regularly and others are just a distraction. I now use Firebug, Web developer toolbar, colorzilla, measureIT, ImageZoom, Delicious, and may get round to installing Scribefire now that I’ve started blogging again.

9) Office - Not too fussed whether it is MS office or Open office plus Thunderbird but best to keep to what everyone else running in the office so have the now ageing MS office 2003.

10) WinRar - For opening everything from ZIP/RAR files to ISO or 7zip - another AIO solution for compressed archives.

For entertainment I could add iTunes and a few other apps but as I’m tight on HDD space on this system I will stick to my iPhone for my music jollies. Fortunately I can now get my podcasts straight to my phone over wifi so PC syncing no longer a daily requirement.

What apps are in your utility belt? What tools can you not live with out?

Testing IE6 on Vista (multiple IE take 2)

Despite numerous free and better browsers being available for a number of years IE6 (Internet Explorer 6) is still used by about 30-35% of web users. This means despite it’s bugs, lack of support for many css techniques or image types as a developer I still have to support it.

I previously wrote about how multiple versions of IE could be installed on one system but this only worked on Windows XP and was extremely buggy, throwing up errors everytime it encountered flash or javascript on a page.

When using Vista even this buggy version of IE6 would not work. Obviously some developers asked Microsoft for a way of running IE6 on Vista. Microsoft said that it would compromise the security if Vista and so the only way was to install a virtual machine running windows XP and IE6. microsoft even provided the virtual machine software and temp XP license for free. I was pleased with this solution as it meant it would be very unlikely Joe Public would get a new Vista PC, decide they want IE6 and be able to install it. The end of IE6 looked near!

Unfortunately, Vista didn’t take off and replace XP, thanks in no small part to Apple’s smear campaign and users with old/obscure hardware being very vocal about performance… But that’s another topic. This meant continued IE6 was needed. While running the Virtual PC worked it was a waste of system resources and slow to open and close so I soon got sick of it. Then came along IETester.

This standalone app enables you to render pages as IE5.5, IE6, IE7 and the latest IE8 beta as seperate tabs. Pages load without the annoying error popups of MultipleIEs and ironically faster than Vista’s built-in IE7 browser.

It unfortunately doesn’t yet support flash in some of the IE versions but this should be in an update. The IETester toolbar replaces the IE toolbars so unfortunately you can’t run IE developer toolbar to help debug. Despite this I highly recommend grabbing this free download (donate if you can) even if you are running XP.

Note if the file is no longer being hosted comment and I will host it for you.

Dreamweaver (and other XML editors) break Vista help and support

If you are installing a web design tool such as Dreamweaver be vary wary over making it your default editor for certain file types.

When I installed Dreamweaver it, by default, becomes the default editor for xml files. In previous versions of Windows this was not a problem. However, in Vista if you accept this you will no longer be able to view help or support pages.

If you’ve already screwed up help and support you can use this fix:
http://www.chris123nt.com/guides/RTM_Fixes/Fix_Help_and_Support.zip

This registry edit will restore Help and Support in Windows Vista.

Credit for this fix goes to Kristan - you can see the full thread on the Microsoft newsgroups.

The Vista Experience

I’ve had Vista Ultimate installed for about a week now and feel ready to give feedback on the new Microsoft OS.

Installation

Having the full Ultimate 32-bit edition I had 3 install options - 1) Upgrade, 2) Clean install from within windows 3) Clean install booting from CD.

I used the Windows Vista Upgrade Advisor to see if I could expect any hardware/software issues. While my hardware checked out ok there were several apps that were not Vista friendly. Two were flat out incompatible and required removal before an upgrade should be attempted. This was Norton Internet Security 2006 and Nero Burning Rom OEM.

This is where I think some people come unstuck with upgrades, they don’t check the software incompatiblies before attempting an upgrade. However saying that after removing the offending programs and a couple of the apps classed as minor problems my clean install from within windows failed.

I opted for a clean install booting from the Disc.

Drivers/hardware

After a fairly quick install I thought all my hardware had been detected as Windows looked so good. However, closer inspection showed a lot of missing drivers including my graphics, and sound cards. Without drivers the display was limited to 800×600 but still appeared clear and colourful. I still had sound, if only in stereo. Once the correct drivers were downloaded and installed I could get full surround sound, high-resolution graphics and the long awaited Aero enhancements.

Finding how to turn on the Aero enhancements wasn’t obvious but a quick search of the help solved that.

I thought I would have little use of Flip 3D other than showing off. However, as my Logitech mouse has additional buttons I found one of them activated flip 3D. I could then use the scroll wheel to skip through the open apps. Rather than waiting for the one I want to come to the front I could use the mouse to click any of the programs in the deck to go to it. This soon became a very quick and easy way to navigate between programes. I still use Alt-tab too but Flip 3D is defintely more useful than I imagined.

Ultimate Extras

The main reason I got the Ultimate edition was for the Ultimate Extras. So far it’s not earnt it’s hype. There have been no cool updates to speak of. Even the DreamScene and GroupShot extras demoed at CES are absent. I did manage to download GroupShot from the Microsoft research site (which works great) but this is available to all windows users (even xp I believe) not just Vista Ultimate. DreamScene is still unavailable as far as I can see.

Access rights

As I did a clean install of Vista on a different hard drive my previous XP installation was still intact. A problem I had in the past with dual boot systems was not being able to access some files on the alternate installation due to access rights. This is not a problem for Vista. When trying to view my windows XP documents folder I am warned I do not have Access rights, however, I am offered the option to “take over ownership” As long as you are logged in as an administrator on your Vista build you can take over ownership of any folder and then access it anytime. As to what happens to my XP installation when I try restarting that again I can’t say as I haven’t tried yet.

From the viewpoint of Front-end developer

Of course it wouldn’t be a good blog post without looking at Windows Vista from the viewpoint of a front-end developer.

The first change is of course Internet Explorer 7 being built in to the OS. This means if you were hanging on to IE6 for testing purposes you will need to get the stand-alone edition. I haven’t tested installing this on Vista yet but this worked fine on XP.

Firefox installed seemlessly as always but I encountered a problem when trying to view online video. Although Windows Media Player 11 is installed as part of Vista the required dll files required by firefox and other browsers are missing. This means playing streamed windows media is only possible in IE7. This is quiet a sneaky move by Microsoft but easily remedied. Simply download the missing dll files into the firefox plugins folder (usually C:\Program Files\Mozilla Firefox\plugins) or better still in the windows media folder so it can be used by all browsers you may install.

You can find the missing files on dlldump.com

• npdsplay.dll
• npwmsdrm.dll
• npdrmv2.dll

If this doesn’t solve the problem get more indepth help here: http://forums.mozillazine.org/viewtopic.php?t=206213

What about the tools of the trade? The Adobe/Macromedia Apps -
You’ll be pleased to know Dreamweaver 8, Flash 8, Photoshop CS2 and Fireworks 8 all run on Vista. However, there are some compatibility issues. If you use the Windows Aero effects you will find they become disabled when you open Fireworks. Windows Vista will switch to “Windows Vista Basic” mode until you close the program. Flash also has issues. It will not force Vista in to Basic mode but you will probably want to do this manually as whenever you enter or exit a set of grouped items the usually near instant transition effect of entering or exiting the group is slowed to a snails pace. This means a 2-3 second wait every time you edit or exit a grouped object - nightmare.

If found no negative side effects in Dreamweaver 8. Photoshop I’ve only opened to see if it would run and haven’t done any indepth testing yet.

The Vista shadow versioning feature could prove useful. Often I make sequence of pages and use one as a template for the next page. In my absent mindedness I sometimes save over my template with the most recent work - trouble. With Shadow backup each individual file is backed up by windows so that I can get back to previous versions of a file if I save over it. Not actually got it to work yet as none of my files seem to have previous versions yet even when I tried a creating a test file. This works like a charm now.

I use a program called PowerDirector from Cyberlink to edit and export video in web friendly formats or for making home movie DVDs. This cannot be run or re-installed anymore. Tech supports solution is to upgrade to their new Premium edition which is Vista Compatible. I am still considering this. Other Apps not liked by Vista is Norton Internet Security 2007.

Continue reading »

Map APIs a comparison

Firstly, sorry for the lack of posts recently - it’s amazing how much time is consumed in looking after a new baby. No doubt you’ve seen Baby Olivia’s photos in my flickr stream featured on the rhs of this blog.

Since been back at work after the Crimbo break I’ve had the chance to work on interactive maps for the first time. Having avoided javascript as much as possible during my time as a front-end designer I suddenly found myself wading in with Ajax.

The project was for the atlarge.com home page as previously mentioned on this blog. I had a look at several 3rd party APIs and settled on Yahoo! Maps as being the best option.

It was the easiest to implement and control, had the most features and I had working map with most of the effects I wanted in an afternoon. However, I had to stop using the Yahoo! API because of 3 major problems.
- view full article for more -
Continue reading »

Get connected at the airports - atlarge.com

A project I worked on back in September/October went live this week - atlarge.com

A lot has been done to it since my HTML/CSS pages were submited. It’s always cool to see all the lights and bells working when you’ve been working on a flat static page and could only imagine what the working page would look/behave like.

I guess that is how movie stars feel when in a special effects scene and all they can see is a blue/green screen.

The site is designed to help you get connected at the airport. The website is driven by user submited ratings and tips. Whether it be the locations of wifi hotspots, availabilty of 3g/GPRS signal or simply if there is somewhere to charge up your devices.

As it’s only just launched a lot of airports have no ratings/tips yet but you can see it’s potential on airports like London Heathrow (LHR) which has seen some activity.

The reviews appear to be moderated which means your review doesn’t appear immediately but ensures useless comments and spam are kept out.

I like the integration with Google Maps enabling you to see a zoomable map of the airport you are viewing.

I hope someone writes a review of Tabago (Tab) airport before I go there next summer. I’m going to be stuck there for about an hour while I wait for my connecting flight to Trinidad and it would be nice to get online - especially on the return leg when I’ll be uploading my photos to flickr.

powered by performancing firefox

Mention on mikons

Regular readers may remember a post I made regarding the excellent mikons tool (click here if you missed it).

Well just as the article is about to disappear off the FFE front page they’ve given us a mention - click to view article.

Thanks a lot for the link.

Since my last visit to the site they’ve launched their mikons t-shirt service. Once I’ve made the perfect icon I’m ordering mine and maybe a few stickers. The clever boys and girls have also used Microformats (hatom) on their site - Which reminds me, I’ve got to get myself one of those Microformats T-shirts.

ZDNet uses Microformats!

If you’re wondering “What on Earth are Microformats?” - where have you been? A quick search on Google returns 11.7million results!

Very brief explanation. For designers it means instead of using random/made-up class names for content you want to style, you use names listed in the Microformat specification. This gives the content you are styling more meaing which can then be read by appropriate software. The class now not only allows you to style that content/element as usual, but also means an application that reads Microformats can “understand” what that content is.

The easiest example to explain is with a contact us page. If Microformat classes are used correctly a Microformat application can differentiate a name, an email address, a telephone number etc. For a user this means when wanting to make a note of someone’s contact details rather than opening up your address book and manually copy and pasting each detail you can click your Microformats button, pick the name you want, view the business card and add it straight to your address book. You could even add all contacts on the page at once. This also works if the information is dispersed through the page such as a biography page containing contact information spread out through the paragraphs, microformats can collate this data into one tidy hcard. This is just one application. Imagine the other posibilities - adding events directly to your calender, XFN relationships, enhanced searches etc.

This is mostly theory at the moment as there are very few websites (Flickr, Technorati, d.construct) that feature this new technique and even fewer applications taking advantage of it (tails, greasemonkey, Safari favelets). However, with the stir being generated about this and the backing it’s receiving it won’t be long before it’s as big as RSS. There is already a Firefox extention called Tails that can read microfomats and Tails export allows you to export the business cards or calendar events (Tails Export is currently only compatible with Firefox 1.5 or older). There are also a few GreaseMonkey Scripts and plugins for IE and Safari.

To see the latest news on which websites or applications make use of Microformats check out the official Microformats.org
website. Microformats are actually a more advanced than I’ve explained here, read more at the official site to get the full picture.

This brings me to the topic of this post - Microformats on ZDNet. If you have the Tails Firefox extention or another application that reads Microformats visit the ZDNet.co.uk contact us page to see Microformats at work. To avoid spammers harvesting email addresses individual contact email addresses are not shown, instead the instruction to use firstname.surname@domain.com is given. However, if you are using a Microformats reader the business card generated still presents the correct email address for each contact. The embedded Microformats was developed by James Myers (a CNET Networks Producer) and myself. James Myers has been interviewed on the subject which will appear on the site as a podcast and video shortly.

This is another example of ZDNet being leader in new technologies. For this reason I am very pleased to present ZDNet.co.uk with the very first FFE (From the Front End) Award. Congratulations to the ZDNet design team on the FFE Award for Best use of new technology on a Business Website. You can view all awards presented by FFE on the Awards page. Three more Awards were given out during the Podcast with Reinette “Ray” De Silva which was recorded last week. James Myers also modestly awarded another site an Award for best use of Microformats in his interview. These will be added to the award page when the Podcast goes live.

If you need any help viewing microformats in your Firefox, IE or Safari please post a comment and I’ll try and help out if I can. Please include your browser name and version.

Firefox 2 review

Seems every tech blog in the land has picked up on the hot release of the week - Firefox 2.0. I heard a lot of good things about it while still in Beta and I finally got round to giving it a spin today.

IE7 also saw a new release this week but got a lot less attention/praise (unless you work for Microsoft) as it didn’t offer much extra compared to RC1 which I already had installed. Opera’s latest release has impressed as it’s the first browser to pass the Acid2 test.

So is FF2.0 worth the download. Well if you haven’t got Firefox at all it’s an obvious yes. Once you’ve tried Firefox for a couple of weeks you’ll find it a frustrating experience to try and browse the web with anything less. However, I am sure I’m preaching to the converted so I’ll focus on What’s New in 2.0.
Continue reading »

Service Comparison: Stock Photography

I’ll kick off the new Service Comparison feature with - Stock Photography.

For those that maybe unsure what Stock Photography is here is a brief explanation.

Stock photography is photography or imagery that is used repeatedly for commercial and non-commercial purposes.

When you need images for a site you may require something very specific and so take a photo yourself or hire a photographer to take the exact image you want. However, most of the time a bespoke image is not needed and a generic image is fine. You may require a picture of “a girl laughing” or “a pen” - this where stock photos come in.

You can search a database of images and find one that fits your purpose. While many like to use Google or Yahoo image search the vast majority of the time the images you find will be copyright and therefore illegal for you to rip off and use. There are some free gallery’s of royalty free images but usually as a free service they are very limited in the quantity, quality and variety of images.

For all the above reasons you will be best off with a paid for Stock Photography service. Some only include images from professional photographers, others are submitted by users of the site (although strongly moderated for quality). Here are the 4 examples that I will compare.

• iStockphoto
• Fotolia
• Shuttershock
• Corbis
• Ablestock

I will be scoring each site based on the following criteria:

Site Design (out of 25)
- Site Apperance
- Site Navagation

Images (out of 25)
- Quality of images
- Max available Resolution of images
- Range

Value (out of 25)
- Price/Value
- Restrictions on use

Editors Tilt (out of 25)

Continue reading »