April 2009 Archives

I use Dreamweaver for XHTML/CSS work and Visual Studio for ASP.NET.  You can say what you want about either of them or about the purity of hand-coding in Notepad, but the reason I use programs like that is primarily because of their "intellisense" and code-complete features.  I still hand-code all my XHTML & CSS but using Dreamweaver allows me to type the code exponentially faster.  I type "m" and it fills in "argin" for me.  This might seem trivial but when you spend your life at the computer this adds up to thousands of saved keystrokes a week.  Code completion features can also be a great learning tool for junior developers and developers getting used to a new language.

Pretty much every web project I've done recently has involved some sort of jQuery coding.   There are some plugins available for Dreamweaver and Visual Studio to add code-complete for jQuery but as of this writing I haven't found any that I love.  Enter Aptana Studio.

Aptana Studio is full-featured IDE with a vast array of features for coding in XHTML/CSS, PHP, Ruby on Rails, Python, and more.  It also features integrated FTP, JavaScript debugging with Firebug, a DOM navigator, and complete set of database tools.   It's a fantastic program, it runs on Windows, Mac, and Linux, and best of all… it's free.  (There is a $99 "Pro" version for hardcore users but the free version has an incredible feature set)

So while there are dozens of reasons to give Aptana a download, the reason I love it right now though is because it has an awesome code assist function for jQuery.   For those of you not using jQuery it also supports and/or has plug-ins for Prototype & Script.aculo.us, Dojo, Ext JS, YUI, MooTools, and pretty much anything else you can imagine.

Here's how to enable code assist for jQuery in Aptana Studio

• Open Aptana Studio
• Click Window > Preferences
• Expand the Aptana node, then the Editors node, then the JavaScript node
• Click on Code Assist
• Check the boxes for libraries you wish to use
• Click Okay and restart the program

Overall Aptana Studio is a great program and a viable alternative for other development environments, especially if you don't want to shell out hundreds of dollars to Adobe or Microsoft.

Download Aptana Studio here.

As a developer I work with many different designers.  Often times I'll just be given a zip file full of Photoshop PSD files to cut up and turn into XHTML/CSS/JavaScript templates.  How the PSDs were created will determine how long it will take to build them.  If you're a designer and you're handing Photoshop files off to a development team, here are six quick tips that will make the production easier.  This should in turn save you money since it will take the developer less time.

• Use multiple layers - Much of web development involves turning elements on/off to export transparent images and background graphics.  Having multiple items all on the same layer makes this process more difficult and more time consuming.
• Name and group your layers - When creating new layers be sure to give them proper names. If your logo consists of twelve different layers named things like "Layer 4 copy" and "Shape 16" this will make things much harder than if you combine them all into one layer or group named "logo".
• Delete unused layers - Often times during the design process a designer will try different techniques before settling on a final design.  By making sure that you remove all unused layers before sending the PSD to the developer you can ensure there will be no confusion over the final design.
• Create all rollover and active states - If your design has different states for nav buttons, include all of them for each and every item in the nav, preferrably in named layer groups.  If you only include one nav item to illustrate the idea then you force the developer to create the other states.  Depending on the design and the developer's Photoshop skills this will often take longer than creating them yourself.
• Include any non-standard fonts - If you're using a non-web font for things like headers or nav items, include those font files with your PSDs. It's likely that your developers will need them to create additional graphics and/or to include in sIFR files.  OpenType fonts will help ensure that they can be opened on Macs or PCs
• Use the notes feature - If you have JavaScript functionality in mind for things like rotating promos or an accordion nav you can annotate your Photoshop file by adding notes. These can help eliminate confusion and ensure you get what you want without wasted hours.

By following those rules and cleaning up your PSD files before you send them on to development you'll make sure that the development process goes as smoothly as possible.  This saves time, money, and keeps your development team happy.