Archive for the 'Posts' Category

Where the hell is Matt - feel inspired!

Deep down, I think everyone is inspired by the concept of world unity, but we usually leave it to air-headed beauty queens and Hollywood celebri-tards to talk about it. After all, if your not a world power or a big corporation, what power do you have to actually do anything? Here’s one creative answer…

This is apparently one of those Internet sensations and I’m simply late to the game. Oh well. I found it really inspirational and got a tremendous kick out of it. I hope it brightens your day as well.

You can find downloadable versions and more information at wherethehellismatt.com. Read more »

My Firefox extension collection

It seems to be some rite of passage for tech-focused blogs that they create a list of their favorite Firefox extensions. Who am I to break custom? If you’re not a web-developer, you can ignore the ones described as such, and consider the rest highly recommended. I have yet to find someone with as many extensions as me. You have been warned. Finally, you’ll find a screenshot demonstrating all these extensions in action at the bottom.


Adblock Plus with Adblock Filterset.G Updater

This is a fairly common standard. Adblock prevents ads from showing based on regex rules. I don’t have the time or inclination to write those rules, so I use Filterset.G to create them for me automatically. Between the two, I see no ads. Ever.

All-in-One Sidebar

It always drove me nuts that the download, extension, and theme panels popped up in their own window. This extension wrangles them into the sidebar area, just like the favorites. It includes an extra toolbar to toggle all the various sidebar areas, but can also contain any toolbar icon.

Better Gmail 2

Take Greasemonkey (which I don’t use), apply it to the Gmail interface, and you have Better Gmail 2. It adds some nice JavaScript-powered effects to the various pages, as well as additional information and links.

BugMeNot

I love using the BugMeNot service to circumvent those stupid sign-up requirements. I just want to read your article/download your software, get the hell out of the way! This plugin saves me from even having to visit the site. Right-click a login box, choose the BugMeNot option, and the login information is filled in automatically.

ColorfulTabs

Applies a different color to each tab, making each tab stand out a little bit better. Also includes options to associate the color with the content of the page.

ColorZilla

If you do any kind of design (but especially web design), you probably look at the web at least for some inspiration. This extension lets you grab any color displayed on any page. You can manually choose colors from the web-based palette, prepare a palette combination, and save your favorite colors.

Console2

Beefs up Firefox’s default error console. Search errors for specific text. Filter by JS, CSS, XML, chrome, or page content.

CustomizeGoogle

If Better Gmail 2 is the flash, this one is the bang. Goes deep into the top 16 Google properties and guts all the crap. Remove ads, remove sponsored links, force to secure connection (for things like Calendar and Docs).

Download Statusbar

Another generally popular pick. I use it for the same reason I use All-in-One Sidebar: it corrals Firefox’s bad habit of opening little extra windows. This one tucks downloads into a dynamic bar along the bottom. Each item is displayed as a progress bar, and includes a ton of download stats when moused over. After the download is done, double click to open/execute it, and the item is removed from the list automatically.

Extended Copy Menu

If you’re a developer, this is the must-have extension you’ve never heard of. It allows you to grab a copy of text from the browser in plain text format, i.e. without any special formatting. No more screwed up layout when you copy stuff into an e-mail or Word doc. Inversely, it also has a HTML copy option, which explicitly and cleanly grabs HTML along with the text.

Fancy Numbered Tabs

Replaces the closed graphic on tabs with a number. Like ColorfulTabs, I find it makes it just a little bit easier to navigate my tabs. It may bork the tab in some of the more elaborate themes.

Fasterfox

Another overall top pick. Fasterfox makes tweaks to Firefox’s configuration options (enter about:config into your address line to see them) to increase performance, sometimes drastically. Install, make sure it’s set to “Turbo Charged,” and you’re done.

Note: Fasterfox is currently marked as “Experimental,” which means you have to have an account on the Mozilla site to download it. I can say that it has worked fine for me, your results could vary (but probably not).

Firebug plus YSlow and Jiffy

At this point, this one really needs no introduction or explanation. If you do anything with the web, Firebug is a must-have. It has debugging options. Lots of them. JavaScript, CSS, XML, HTML, AJAX. This post is already too long, read the documentation for all the details.

YSlow and Jiffy are nice complements to Firebug’s standard functions. YSlow evaluates a given page and tells you how to speed things up. Includes links to the now-famous Exceptional Performance section of Yahoo’s Developer Network. Jiffy focuses on your Javascript and identifies which ones slowing up your page loads. Jiffy is also “Experimental,” like Fasterfox.

FireFTP

A solid FTP client is another required tool in any developer’s toolbox. I’ve tried all the usuals. CuteFTP, Filezilla, SmartFTP, WinSCP, each with their drawbacks. Lowsy interfaces, no reconnect, upload failure…Plus it’s another window I have to click, in addition to my browser and my coding interface. FireFTP has no downsides that I’ve found yet, sites right next to whatever site I’m working on, and is totally free.

Forecastfox

I don’t know anyone who doesn’t have this one. As if web-based weather wasn’t easy enough, now I don’t even need to browse anywhere to see the current, upcoming, and next day’s forecast. Mouseovers for radar and forecast details. Click any one for more information via AccuWeather.com (and with Adblock/Filterset.G, you won’t be bothered with their ads, either!). Automatic sliders for weather alerts.

Foxmarks Bookmark Synchronizer

Never worry about backing up your bookmarks again! Sign up for the free service (prompted automatically after installation), and Foxmarks will automatically maintain a remote copy of your bookmarks. If you’re away from your computer, you can access the bookmarks from their website. Side bonus: you can keep bookmarks in sync across multiple computers! I have an office laptop and a home desktop, and they always have the same bookmark list.

Gmail Notifier

There are tons of mail notifiers now, but if you use Gmail, this is one of the best. Easy setup, manage multiple accounts, automatic login, and a new mail alert slider.

IE Tab

Windows users have to go to the dark side for frequent security updates, and the occasional corporate site or intranet that Microsoft holds by the figs. Now you never have to leave the comforts of open-source home. This extension allows you to open a tab powered by the IE engine. Works with ActiveX plugins, so the Windows Updates site works fine.

Old Location Bar

I love the improvements in Firefox 3 save one: the auto-complete box that pops up as you type in the address bar. There’s so much going on in it, I find it impossible to discern the actual results at a glance. I don’t care about the page’s description, what’s the damn URL? Apparently I’m not alone. This extension brings back the simple listing behavior you saw in Firefox 2. Listed as “Experimental” like Firebug and Jiffy list above.

PDF Download

Ever click a link, only to get whacked in the face with that awful Adobe PDF plugin? Here’s an early warning system. When you click a PDF link, you are prompted with a series of options. Download it, open it using settings specified in the extension options, convert to HTML via PDF Download, use Firefox’s default behavior (usually aforementioned Adobe garbage), or cancel the download.

Bonus! Foxit PDF Reader

Okay, it’s not a Firefox extension, but I just can’t let one more person suffer under Adobe PDF Reader. That thing is a bloated, cpu-hogging, memory gobbling crap-fest. If all you need to do is view PDF documents (i.e. 99% of us), Foxit will meet your needs without running background clients (check your startup folder), and uses a fraction of the disk space.

Quick Restart

Ever notice that restart button you get when you install a new theme or extension? Now you can have that functionality whenever you want. Firefox still has a shifty memory leak, and this extension really saves me when it rears its ugly head. Hit the button, browser off, browser on. Tabs are saved.

ShowIP

Shows the IP Address of the site you are viewing in the bottom taskbar. A must for web guys, but security wonks and general tech enthusiasts will like this.

StumbleUpon

Ever notice your browsing habits get into a rut? You look at the same sites, or you friends keep sending similar YouTube videos of people acting like idiots. Break out! Install the plugin, create an account, set your desired topics, and click the button. SU will send you off to places previously unknown. Give your destinations a thumbs up or down, and SU will learn to tailor its offerings to you (a bit). StumbleUpon has been gaining more and more steam for its unique approach to browsing. However I saw the potential early on. Check out that “Member since” date!

Tiny Menu

If you’re a frequent flyer on the menu bar (File, Edit, View, etc. alogn the top), just go right past this. But if you’re a snobby tech elitist who has evolved past menus and into keyboard shortcuts, you’ll love Tiny menu. Condenses all the menu bar options under a single icon, allowing you to use the bar for other purposes, or eliminate it entirely. I stretch my address bar across the length, and give the search bar it’s own line beneath.

Update Notifier

Firefox does a good job of looking for updates routinely, but only does so at startup. So if you leave your browser open for long periods of time (or indefinitely, like me), you never get those notices. Enter this extension, which checks for updates at a routine interval (adjustable, 24 hours by default), and displays notifies you by highlighting the menu bar icon. The icon also allows you to run a manual check. Another click will automatically install the updates, and a third will restart the browser. All of these steps can be automated.

User Agent Switcher

Another must-have for web developers and designers here. It changes the user-agent string to whatever you want. In layman’s terms, you can masquerade as any other browser. Great for testign browser-specific stylesheets, as well as security settings.

Web Developer

Complements really well with Firebug, though there is a fair bit of overlap. I use it a lot to resize the browser for specific pixel dimensions (how does this page look at 800 x 600?), outline elements for layout debugs, reset my browser cache, find broken images, test my Javascript graceful degradation (or, often, lack thereof), or measure an elements actual size with the ruler. Plenty of other useful data outputs.


Here’s what all that looks like in action. It’s a bit of a departure from the default layout, but it works for me. Hopefully you’ll find something useful in that list as well.

Turn off AVG e-mail signature

I am a huge fan of AVG Anti-Virus Free Edition. It provides the same level of virus protection as the pay-for packages—don’t be fooled, the differences are bells and whistles—and because it’s trimmed down it eats up less resources. I always install it as part of a comprehensive approach using several free Windows security tools.

However, how many times have you seen this at the bottom of an e-mail?

No virus found in this incoming message.
Checked by AVG - http://www.avg.com
Version: 8.0.169 / Virus Database: 270.6.14/1647 - Release Date: 9/2/2008 6:02 AM

This is especially great in e-mail conversations, where I’ll see this same text stacked up five, ten, fifteen times at the bottom. It’s a tremendous waste of space and makes scanning an e-mail conversation difficult to say the least. I don’t need to know that you have anti-virus software installed. If I did, I wouldn’t have installed it on my own computer. Duh.

AVG does this by default, and they don’t make it obvious at install time how to disable it. It may have something to do with the shameless plug they put in there, but I could be wrong.

If you want to get rid of the stupid thing, here’s how to do it in version 8…

  1. Double-click the AVG icon in your taskbar to bring up the control panel window.
  2. Go the menu bar, choose Tools, then Advanced Settings…
  3. Choose E-mail Scanner from the left-hand menu
  4. In the right-hand pane, clear the checkbox labeled Certify e-mail.
  5. Click the OK button at the bottom

Comics for teh 133t h@xxz0rz

A coworker turned me onto the webcomic xkcd earlier this summer. If you are reading this (there’s a philosophy joke here somewhere…), then you’ll probably appreciate the humor of this guy.

Need more proof? Aside from syndicating the comic directly in his RSS feed (I’ve never seen that before), he also (a) does not have a “www” subdomain, and (b) runs his own IRC channel (#xkcd on irc.foonetic.net). An IRC channel for a web comic must rank up there somewhere on the uber-nerd scale. Even my wife admits that would give me a run for a my money.

I’ve been slowly going through the archives. My current favorites:

and

Sidenote: Firefox flagged the word “webcomic” as a misspelling. For shame! Anyone know where you can submit new words to their system? I just love seeing OSS adopt new vernacular before Webster or M$ jump on the bandwagon.

Update: I realized that the post title is probably absolutely gibberish to most people. It’s written in leet speak, which replaces letters with numbers and symbols. Several origins have been described, but I see it used a lot in gaming circles simply to ensure uniqueness (since you cannot have two players with the same name).

Run your website like a dairy farm

Whenever I get into a discussion about web usability or UI, I always use the same analogy to describe how to succeed in making happy users. At this point, it’s stood up to a fair amount of scrutiny in conversation, but I’ve never put it onto paper. I firmly believe that all good ideas should be written down, so consider this the next time you’re building a user-heavy web application…

The Science Channel has a series called “How It’s Made.” Any given episode will give you the background on how any number of consumer products are produced.  Tires, chainsaws, trumpets, bacon, and even British police helmets have all been covered.  It’s worth the half-hour.

One segment covering modern dairy farms particularly struck (not what you were expecting, I’m sure). You won’t find this one listed in the link above, but I did track it down on YouTube. I’m pretty sure it came from a pilot episode, as the narrator and opening animation are different. You may want to watch it first, but it’s not necessary for this analogy to make sense.

One huge caveat: I do not think my beloved web users are a big dumb animals. The analogy goes a fair bit deeper. Also the word “teat” is used a number of times in the video above, so do your best to keep your head out of the gutter.

Take care of your users. Just as happy cows get “45k of feed” each day and wander as they please, you must take care of your users at every step in their experience on your site. Your navigation and overall usability are the top priorities here; don’t let them get lost, and make the available actions on each page as clear as possible. To ensure there’s no thumb-twiddling, keep load times down. Yahoo maintains the definitive list in this regard, and complements well with their YSlow add-on for Firebug. You can also use a speed tester to see how your site stacks up in the wild. You know you’re doing this right if users don’t complain. Like I’m always telling my staff, “Successful web design is not determined by the presence of compliments, but rather the absence of complaints.”

Keep things clean.You may not have to worry about manure on a barnyard floor, but you better still be in there sprucing things up on a regular basis! For any information-based site, the worst offense of all is stale content. Keep delivering fresh information to keep your users entertained and engaged.

Professional-level sites are often maintain by several developers, and must meet the needs of different (and sometimes conflicting) departments and business interests. Here you must also stay vigilant against website sprawl, which is the natural inclination of a website to grow and spread out in an ever-increasing number of directions. Does each board meeting really need its own minutes page? Can that hacked-up marketing tool find a formal home in your admin somewhere? Keep it tight, and if you don’t need it, lose it. If your boss says otherwise, try to keep it corralled along with similar pieces of politically necessary stuff, like the junk drawer in your kitchen. Where are those scissors…?

Performance is also an ever present concern. Watch your logs for badly behaving pages, black holes (pages that constitute a large portion of exit traffic), and hack attempts. Browser updates and standards compliance will also keep you busy. I recommend you try to stay as close to standards as possible, but not at the expense of site functionality. If it works in the “big 4″–Firefox, Safari, Opera, and IE (listed last for a reason)–you’re good to go.

Track your users. Like the cow’s ID tag, you should use session data for general behavior tracking, to identify just how your site is being used. If you add user logins to mix, you can track individual performance, for even more detail, and provide data, search results, and product suggestions customized to the user.

Guide your users. The thing that struck me most about this dairy farm was the complete lack of farmhands. Everything was automated, including the milking process. This is very much like a user on a service based site, or online store. I’m sure the farmhands were there, off-camera, just as we provide help windows, email support, and phone numbers when a user hits a wall. However things run best when the user simply gets what they need, without any additional effort on their or your part.

Give your users clear indicators of where they are and what they are doing. You can’t force your users down the line of the milking stall (think checkout procedures), but you can give them explicit boundaries to show them where they should be going. Again, your attention to usability will win the day on this one.

What other analogies do you see at work here? Do you have any of your own analogies that you use when describing proper techniques to colleagues or the occasional lay person? I’d love to hear what you think!

Using SQL computations in WHERE clause

When writing SQL statements, sometimes I want to filter the result set based on a value that must be computed out of the stored data. Here’s an example:

SELECT widgetID, count( widgetID ) AS totalWidgets
FROM table_widget_sales
WHERE totalWidgets > 1
GROUP BY widgetID
ORDER BY totalWidgets DESC

I want to see which widgets have been sold more than once, and how many times each of those remaining widgets have sold. Obviously we could pass a simpler query into a scripting language to calculate it for us, but that’s more cycles and memory. I love to squeeze as much out of my SQL statements as possible.

Problem is, when I run that query above, I get this error:

#1054 - Unknown column 'totalWidgets' in 'where clause'

My first reaction is, “I can use that column in the order by clause, why not where clauses!?” Simple, the value doesn’t exist when the WHERE clause is evaluated. The number is calculated as each matching record is passed. By the time we reach the ORDER BY clause, we have the data we need. But the WHERE clause is used to actually figure out what records we need to perform that calculation, so we’ve got a chicken-egg issue.

The solution is to use a subquery, sometimes called a “sub-select statement.” Using two select statements, we can split the duties for filtering (more than 1 widget sale) and counting (total number of sales per widget).

Here’s the working query:

SELECT w.widgetID, COUNT( ws.widgetID ) AS totalWidgets
FROM table_widgets AS w
INNER JOIN table_widget_sales AS ws ON ( w.widgetID = ws.widgetID )
WHERE (
SELECT COUNT( ws.widgetID ) AS number
FROM table_widget_sales AS ws
WHERE ws.widgetID = w.widgetID
) > 1
GROUP BY widgetID
ORDER BY totalWidgets DESC

See what’s going on? We’re doing the same count twice, but the subquery returns everything (number of sales per widget for all widgets), while the first select only grabs the results we want (sales greater than 1).

It’s a feature, not a bug, stupid!

Over at ClassicWines, we recently experienced a login issue, where data was not being saved to the session after submitting valid credentials. Enter your username, password, and you would end up back at the home page as if nothing happened. I was banging my head against my desk (literally) looking for the cause.

Cut to the happy ending: PHP introduced a new “feature” that deconstructs objects BEFORE writing and closing the session. This means that if you use classes to manage your sessions, those classes are gone before the script executes your methods to save the session. There’s a warning at the bottom of the PHP manual page for session_set_save_handler() that identifies the issue succinctly.

For anyone who ended up here looking for help, the workaround is to call session_write_close() before the classes are deconstructed, usually with a combination of the __destruct() magic method and register_shutdown_function(). PHP documentation claims it was introduced in v5.0.5, but I did not have this issue using v5.1.2. If you like examples, Zen Cart built in a fix in the latest versions of their package.

This is a small example of a much larger problem in our industry: blind devotion to “the rules.” Technically speaking, the PHP team’s decision was correct: items loaded into memory should be destroyed in the reverse order in which they were created. It’s typically a good assumption to make, because often the younger processes were spawned by and rely on the ones that came before it.

But in this situation it makes absolutely no practical sense. I need my classes in order to close the session properly (as do many developers), and so ideally they should exist when I need them. This is, in fact, the way things worked prior to the bug fix.

The documentation warning I mentioned above even describes the situation as a “chicken and egg” problem, indicating some tacit acceptance of the fact that you cannot have one without the other. The case can be made for either one taking priority.

All that being the case, why make the change at all? It did not make anyone’s life easier. Quite the opposite, in fact. The new setup requires more logic, and hence more lines of code, to write and maintain. The fact that the session came first in the load order is totally irrelevant. Breaking the order of destruction is merely a break in convention, nothing more.

It’s a classic case of architecture astronauts.

When you go too far up, abstraction-wise, you run out of oxygen. Sometimes smart thinkers just don’t know when to stop, and they create these absurd, all-encompassing, high-level pictures of the universe that are all good and fine, but don’t actually mean anything at all.

The PHP team is, by nature, a pretty high-floating group. To a certain extent, it’s to be expected; they’re writing a programming language, after all. But this decision definitely shows a lack of oxygen.

My number one concern is always making my code do what it needs to do in the most efficient way possible. If that breaks a socially accepted norm or two, I have absolutely no problem with it, and neither should you.

Getting Started with Eclipse Part 2

Okay, so it took me WAY longer than a week to get this up, I apologize. However, as promised, here is the second half of Peter Coles’ walkthrough of Eclipse. This portion focuses on the actual installation and configuration of Eclipse. If you don’t know what Eclipse is, or want to see why Peter loves it, check out the part 1 post. Everyone else, enjoy!


Step 1
We’ll start by scooting over to http://download.eclipse.org/tools/pdt/downloads/index.php to pick up a copy of the latest stable release (currently 1.0.3). This wraps up both base Eclipse and the PHP Development Tools.

Once downloaded, unzip it and pop the eclipse folder somewhere appropriate. In Windows, I put it in the “Program Files” folder and created a shortcut to the executable file in my quick launch bar. On the Mac I put it in the applications folder and dragged the executable to the dock. In Linux…well if you’re using Linux then I doubt that you need my help on this.

Step 2
Launch Eclipse and specify where you would like to store your workspace. This is where all your files and settings will be put.

Step 3
Click on the button to the right to go to the workbench. You can explore the snazzy icons later.

Step 4
On the main menu go to Help > Software Updates > Find and Install. Select Search for new features to install and click Next. Click the New Remote Site… button and create a site called “Aptana” with URL “ http://update.aptana.com/install/3.2“. Click on Finish and it will do a search for what’s available and should find Aptana. Tick the box next to it and then click Next. Accept the license agreement, click Next and then Finish. Go make a cup of tea or take some other refreshment, this will take a while.

Once the download is complete you’ll probably be asked to install unsigned items part. Be brave, click Install All. Once completed you be asked to agree to configure your firewall to allow Aptana through (it likes to update you on new features). There’s no need to restart Eclipse yet. You have now installed the community version of Aptana Studio, but not its PHP tools (which we don’t want — they interfere with the better PDT tools) into Eclipse. You can learn more about Aptana Studio at http://www.aptana.com/studio.

Step 5
Now we’re going to add a couple of optional plug-ins from an independent source: Andrei Loskutov. Two of his plug-ins are of particular interest: FileSync and AnyEdit. FileSync allows a link to be created between a file in a project and an external location. For Kuroi this is useful to maintain the link between the development fileset and the test environment files, but I can imagine many other possible uses depending upon your workflow. AnyEdit is the plug-in that I am using to automatically replace tabs with spaces and strip whitespace from the end of lines.

The install process is similar to Step 4. Help > Software Updates > Find and Install; select Search for new features to install and click on Next. Click the New Remote Site… button and create a site called “Andrei  Loskutov” with URL “http://andrei.gmxhome.de/eclipse/”. If the Aptana box is still checked, uncheck it and click Finish. Expand the list of features until you can see all five. Select those you want (FileSync and AnyEdit Tools recommended). Click on Next, accept the licenses, Next again, Finish and then Install All. Still no need to restart Eclipse.

Step 6
Finally we’re going to install Subversive. This is the most complex installation, and it’s only marginally more complex than those we did in the previous two steps as we will need to interrogate two remote sites and exclude some options. Let’s first go to Help > Software Updates > Find and Install; select Search for new features to install and click on Next. Click the New Remote Site… button and create a site called “Subversive” with URL “ http://download.eclipse.org/technology/subversive/0.7/update-site/” (and while you’re there, uncheck Andrei). Repeat the process yet again to create another remote site called “Subversive SVN Connections” with URL “ http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/” and hit finish.

I recommend ticking the Automatically select mirrors box on the popup that appears, then OK. Check the first box and you’ll probably get a message about the “Mylyn Project.” Drilling down will show you where it’s coming from and allow you to uncheck this option. Clicking on the Connections box may result in errors (for the Mac I had to remove Win32 specific options — seems reasonable). Then carry on as for the previous options, but this time opt to restart Eclipse at the end of the process. Don’t worry if it starts up once and then restarts itself a second time, it won’t do this normally.

Step 7
Close down the welcome screen — I’ll leave you to decide whether to install the further updates from Aptana at this time. You’ll probably want to get rid of that Aptana Welcome page too for the moment.

Step 8
Let’s get in the mood for PHP. in the menu bar, go to Window > Open Perspective > PHP.

Step 9
Now we’ll set a few configs. First find the preferences menu. In Windows it’s at the bottom of the window menu. On a Mac it’s near the top of the Eclipse menu. Wherever it is, open it and go to PHP > Formatter and change the tabs to 2 spaces. Then, still in the preferences popup, back up to General > Editors > AnyEdit Tools and under the Auto Convert tab, check convert tabs <-> spaces. You want to uncheck the warning immediately below too. Then Click on OK.

Step 10
To create a new project, click on the top left icon and select New PHP Project.

Step 11
To set up a subversive link to a repository we’ll first open up a new view: Window > Show View > Other… > SVN > SVN repositories. Click on the icon with the green plus, and the rest should be obvious (if you are familiar with SVN already).


If it feels like an abrupt ending, I apologize. Peter’s walkthrough ends here, however things continue to get more interesting. The entire concept of an Eclipse project deserves a walkthrough in its own right, along with workspaces and perspectives (these Google search results will get you started, though). I strongly recommend you hit up the Eclipse Wiki and the official documentation for more information.

The Greatest Firefox plugin

…ever.

http://amionmyspace.com

Getting Started with Eclipse Part 1

When I went to the Zen Cart Conference in Toronto in April, I had the great pleasure of meeting Peter Coles, owner and operator of Kuroi, a web design firm based in the UK. Peter is definitely one of the best developers I’ve seen bubble up from the Zen Cart community (along with team member Chris Brown).

For the meeting, Peter put together a fantastic tutorial on Eclipse, the premier integrated development environment (IDE). I played with Eclipse in the past, but it’s so overwhelming initially that I never got the hang of it; Notepad++ always suited me just fine. Peter did a great job making the system approachable, including a step-by-step guide specifically targetting PHP developers. Needless to say, I saw the shortcomings of my simple text editor, and am currently tackling this beast.

With Peter’s permission I am happy to share his tutorial from the Toronto conference here with you (minor edits made for consistency). Today’s segment covers why Eclipse was a good choice for Peter and Kuroi (and why it’s a good choice for you!). Later this week I’ll post the actual steps for setting up Eclipse. Enjoy!


At Kuroi, we have been considering for a while a move away from Dreamweaver, to a tool that is better able to support the type of work that we are do. We both have developer backgrounds and do the vast majority of our work, development and styling, by hand coding rather than by use of the WYSIWYG interface that is one of DW’s main strengths.

Our search was motivated by growing awareness that DW simply isn’t designed for our way of working. In effect it was a glorified editor with a few nice features. We were sure that there would be an IDE (or IDE’s) that would more closely match our preferences and offer additional features that would streamline our workflow. The ideal IDE would therefore give us everything we actually use in Dreamweaver and some nice goodies to make the transition worthwhile.

This all comes with the huge caveat that I’m still at an early stage of learning how to use Eclipse, but even at this early point, I’m seeing more than enough benefits to recommend that Kuroi makes the switch.

Why Eclipse?

I looked (briefly) at a number of IDEs and one in particular in depth. Aptana is gaining in popularity amongst designers, largely because of its support for AJAX development. It has a PHP add-in and also one for AIR, which made it particularly interesting. However, I was unimpressed with its PHP editor and PHP support generally, and the discovery that it didn’t support the deployment of files across a network (i.e. to our test server). However, Aptana Studio is built on Eclipse, thus drawing my attention back in that direction.

Eclipse comes from the non-profit Eclipse Foundation which includes representatives from (amongst others) IBM, HP, Red Hat, SuSE, Ericsson, Intel, SAP, and more recently (and significantly for PHP development) Zend. The current version of Zend Studio is being sold in two forms: a stand-alone version and one built on Eclipse, which in my view is the first step in a Zend strategy to move all of its customers to the Eclipse-based version. One license fee gets you both versions.

Another factor that drew our attention here at Kuroi was that Adobe (owners of Dreamweaver and the Flash IDE) are now basing the Flex IDE (that’s the one used to Flash movies using a programming language) on Eclipse. Now that’s a vote of confidence!

So Eclipse is stable, well-supported, and building up some serious momentum, as well as providing a consistent approach to tackling an unprecedentedly wide variety of development types that previously would have required very different development tools.

Oh, and it’s free!

For us cost isn’t the primary concern, and I have also evaluated Zend Studio on Eclipse against Eclipse PDT (PHP Development Tools). But I struggled at first to find differences. They are there. The debugging is reputedly better integrated, code deployment is easier and there will surely be differences in the integration of other Zend services. But most of the basic stuff we do in DW is covered by the base functionality in Eclipse so there didn’t seem a need to splash out $399 per workstation (and we have several) at this point. However, if those extras were needed in the future, it would be possible could upgrade to Zend and benefit from the knowledge and working practises derived from use of the underlying package as the icons, look & feel and underlying paradigms are that similar, and Zend is structured as an increment to the base package.

This would be true of other tools too. The problem that I had with Aptana not supporting a network server arose in Eclipse too. I solved it by using an Eclipse plug-in and since Aptana is based on Eclipse, I had to try…and yes, it worked there too, and have a growing belief that it would work in any Eclipse-based application. And as you will see there proved to be another major benefit to this inter-operability.

Anyway, enough raving…

What do we want from it to match our Dreamweaver workflow?

We rely upon (in no particular order):

  • Syntax Colouring
  • Snippets
  • Code folding
  • File Manager
  • Working File Segregation with local and remote deployment
  • Code Search (current project and whole Zen Cart distro)
  • File Compare
  • Parenthesis Matching

So can Eclipse offer these?

Syntax Colouring
This is available by default and can be configured through Window > Preferences > PHP > Editor > Syntax Coloring

Snippets
There is a snippets view allowing common code blocks to be saved and quickly re-used. Snippets can also be exported and imported (useful for sharing). However, code completion and code templates offer even faster way of inserting blocks of code or functions in may situations.

Code Folding
Code folding is available but unlike Dreamweaver files are opened with comment blocks and functions already foldered. This is bliss (though if you don’t like it, it can be turned off too). It is so much quicker to locate specific bits of code in large files (and this is just one of the tools that helps in this.

File Manager
Eclipe’s PHP Explorer view offers a file tree similar to the file manager in Dreamweaver, but goes wider. At the top end it includes projects (rather than them being separate entitles that you must switch between à la DW). At the bottom end it allows you to drill down into some files. For example, it is possible to drill down into classes or other files containing ph functions and select a specific function or method. The relevant file will be opened with all functions closed (see above) except for the specific one selected (more bliss).

Working File Segregation and Deployment
At Kuroi we typically work with Zen Cart and Drupal, both of which are large file sets. So we segregate the files which we have changed or created from the full code set for the underlying application, and use DW to deploy our files to environments with a full installation for testing or delivery. DW allows us to define a local, test and remote file set and switch between them.

Eclipse is focused differently. It appears to be good at supporting projects based around code repositories but weak at simply transferring files to another server across a network or by FTP (or similar). However this can be dealt with.

The top ranked plug-in for Eclipse is FileSync. Installation is a breeze (and will be covered), and once in place it allows the files in a project to be linked to an external file set, such as those on our test server. Editing and saving a file in the project, automatically updates the equivalent external file. Precisely which files get updated can be set at folder or file level (as opposed to DW’s cloaking facility, which only allows folders to be excluded from updates).

Although there is an FTP facility originally developed by IBM, it appears to have a poor reputation and wasn’t easy to install (i.e. I didn’t manage it). However, Aptana’s FTP has a good reputation, and I was able (easily) to add it to Eclipse (details below). Like DW it allows bi-directional synchronization, but in place of upload and download there is a unidirectional synchronization, and no drag and drop.

Code Search (current project and whole Zen Cart distro)
Search is easily accessed by a keyboard short cut or a button on the navigation bar. The modular nature of Eclipse, and the way I have built my install, means that I have ended up a choice of four slightly different search facilities! I suspect that I could trim that down if I wished, but it’s not inconvenient. Searching brings up a results window, as in DW, but rather than showing the searched for term in context, it shows a file tree. Clicking on a result will open the file and take you to the first result in the file, or you can use the search result navigation buttons to navigate through the results, weed them or re-run a previous search. Oh, and you can do replacement too.

File Compare
DW allows the integration of third-party file comparison tools (one of us uses WinMerge, the other Beyond Compare). Eclipse has file comparison built in and when I say file comparison, I mean file compare on steroids. It will compare folders and their contents or individual files. The options available depend on the context; but contain at least “base from working copy”, “latest from repository”, “URL”, “branch”, “tag”, “each other” and “local history.” That last one means that a file can be compared with its own history, nice! There is also “help” available for three way comparisons though my poor, exploding brain isn’t ready for that yet.

Parenthesis Matching
Only joking. DW doesn’t do this. So we both switch regularly into Notepad++ which does, just for this. Happily it’s built in to Eclipse.

What Extra Goodies can Eclipse give us?

Well, that’s all the boxes ticked for what we do now. Is there anything new? Well, yes. Heaps. I can only scratch the surface here.

Subversive SVN
One of the modules that can be added into Eclipse is Subversive. An official Eclipse project, this add-in claims to use an extended API allowing it to offer features for working with SVN repositories that aren’t available in other packages. I don’t have enough experience of SVN to gauge the validity or benefits of this. But I do like being able to update SVN repositories from within my IDE with a single click.

I haven’t yet attempted to upload to a repository from Eclipse, but suspect that it would prove very simple to do.

Code Assist
Start to type a function and then press ctrl-space and up will pop a tool tip with all functions matching what has been typed so far and all functions that match what has been typed so far are made available in the a hover window for selection. Also available are details of the parameters taken by the function. The same can be done for defined constants, for which information about where they have been declared and their value is also displayed.

But it gets better. The functions and constants available via code assist don’t have to be restricted to those in the current project or built into PHP. It is possible to include a reference to another project, including a project linked to an SVN repository, and have all functions in that project also included in code assist.

And it gets even better still! If I instantiate a new class, and then type the name which I have assigned to it plus -> (e.g. $newOrder->) up pops a list of the methods available to this instance. Amazing.

Code Formatting
There’s a neat little add-in that can be applied to most editors to do things like convert all tabs to two spaces and any strip whitespace from the end of lines automatically whenever a file is saved, so you never need to worry about this again.

Multiple Editors
The extent to which this is a benefit or not is arguable, but an Eclipse installation will typically have several specialist editors, rather than DW’s jack-of-all-trades. Happily they work rather well together so, for example, I have been able to construct a template file with the Aptana HTML editor, taking advantage of its HTML code assist and completion facilities, and then switch to the PHP editor to insert the dynamic content. This is much less clunky than it sounds, since you can have the same file open in two editors at the same time and any changes made in one are immediately visible in the other.

PHP Project Outline
This offers a tree view of all constants, classes and functions in a project and the ability to jump straight to where each is declared.

Outline View
By default this is set to show the outline of a PHP file and is very useful for providing a quick overview of php scripts with classes and functions, which can be displayed in several different ways. Go to a template file and switch the view over to HTML and it displays an equally useful overview of the tag structure.

Real-time Syntax Validation
Eclipse checks your syntax as you type. If it detects a problem, it puts a little white cross on a red background next to the file and relevant line. There is a setting in the preferences that allows you to hover over the indicator in the file to see why it has been flagged.

Auto Insertion of phpDoc Comment Blocks
Write a function or method and go back to insert a comment block and Eclipse can scan what you’ve written and insert a part completed comment block, which will also contribute automatically to your project’s code assist.


Check back later this week for the follow-up, where Peter will go in depth on just how to get Eclipse going on your system, with all the features he has described above! You can save yourself the effort by simply joining the RSS feed.

« Previous PageNext Page »