beTech :: Evolve Already

The Firebug 1.0 (beta) Firefox extension transports an already awesome web development tool into the realm of the absolutely indispensable. Check out the mind-boggling added functionality:

• HTML Editing: Edit HTML on the fly, see the changes highlighted, search HTML, and much more.
• CSS Development: Wow! Chris Pederick’s Web Developer Extension was great at composing CSS on the fly, but Firebug kicks butt! Preview colors by mousing over the CSS color values, use the up and down keys to increment numeric values, do the same with attribute values and witness Firebug’s built in CSS dictionary run through the possible choices. There are several more features in the CSS tool that would have been enough to make Firebug a must-have tool for developers.
• CSS Layout Visualizing: The box model can be a dastardly concept to comprehend. The Firebug layout visualizer saves the day.
• Net Activity Monitoring: Want to see some neat bar charts? Take Firebug to a big Ajax site and check out the network requests. Heck! Take it to your own site and see what parts of your pages are taking the longest to load. It graphs every get request—including HTML, JavaScript, CSS, and images.
• JavaScript Debugging: Firebug was already good at this as well, now it’s great. Pause execution, step, and break your JavaScript to your heart’s content.

We could say more, but we’d be delaying you from getting on with the Firebug experience. Go get it and let us know what you think.

Oh, and one more thing, did we mention it’s now available for IE, Opera, and Safari? Consider it done.

I’ve just spent the majority of my weekend trying to install and learn about Joomla CMS, only to be disheartened when I came to learn how pitifully it supports web standards and Web 2.0 style app development. By the sizes of its developer and user communities (aka the “Joomlasphere”), and the near-fanatical loyalty and enthusiasm I detected as I visited Joomla-related sites, I assumed Joomla would have long been tweaked to rock out with things like CSS layout and integration of some of the new-fangled javascript dhtml/ajax/animation libraries. Not so, at least not without undue hacking and headaches. Read this and weep (look under the “Mambo” entry, as Joomla is a branch of Mambo.) I did, after successfully installing Joomla and spending about 10 hours this weekend reading documentation, installing extensions, and configuring the bastard.

After looking at the PHP code of the main Joomla content component, and seeing how riddled it was with tables, and realizing how inextricable tables were from its core, I proceeded to search for another CMS. This time I was going for something that was built to support web standards and Web 2.0. A quick Google search landed me at the MODx site. Wow! It seemed too good to be true. From their website:

“MODx is 100% buzzword compliant, and makes child’s play of building content managed sites with validating, accessible CSS layouts—hence Ajax CMS. It empowers its users to build engaging “Web 2.0″ sites today, with its pre-integrated Scriptaculous and Prototype libraries. If you’re a CSS designer or Ajax aficionado, this is the CMS for you; and if you like what you see today, you’ll love what’s coming.”

MODx is written in PHP—support requirements are minimal enough for it to work on the UVa unix web cluster—it’s open-source, it’s free, and it looks remarkably well organized. I successfully installed it in the twilight hours yesterday, and have yet to really take it for a test drive. When I do, I’ll post my impressions and/or battle stories. One quick note: if you install it on the UVa web cluster you’ll want to rename some of the files to have .suphp extensions and put a little rewrite hack in an .htaccess file in your root. I’ll post specific instructions for this in the next few days.

I was searching for an accessible toggling solution the other day (more on that in an upcoming article), when I bumped smack-dab into what appears to be a undocumented Safari bug. I submitted a bug report to Apple (and Quirksmode) already, but I thought I’d try to explain the bug as well as the fix to save you the hours of Googling that I went through. Of course, you’ll receive beTech brownie points if you can explain why it happens (or even correct me).

When changing a parent element’s class via JavaScript/DOM, the initial class’s position:absolute declaration sticks in Safari. The problem is corrected by applying a position:relative declaration to the parent element’s children. Explaining the bug is harder than demonstrating it, so open up Safari and take a look at the examples.

If you’ve been feeling a bit timid about the whole CSS thing, A List Apart’s Ben Henick offers 12 Lessons for Those Afraid of CSS and Standards. It’s a great primer for those diving into their first Web Standards project and a nice review for seasoned CSS/Standards code wranglers.

Here’s a quick rundown of the 12 lessons:

1. Everything you know is wrong—sort of
2. It’s not going to look exactly the same everywhere unless you’re willing to face some grief—and possibly not even then
3. You will be forced to choose between the ideal and the practicable
4. Perfection is not when there’s nothing to add, but when there’s nothing to take away
5. Some sites are steaming heaps of edge cases
6. Longer lead times are inevitable
7. Coherent and sensible source order is the best of Good Things
8. Descendant selectors are the beginning and end of genuinely powerful CSS rules
9. In the real world, stylesheet hacks will get your project across the finish line
10. Working around rendering bugs is like playing Whack-a-Mole
11. When you’re drowning in CSS layout problems, make sure of the width and height of the water, float without putting up a struggle, and get clear of the problems
12. Background images will make the difference between the plain and the tastefully embellished

With the release of Internet Explorer 7 imminent, the Microsoft IE team took some time yesterday to recap the CSS changes to expect in IE 7. They also openly admitted that IE 7 is a stepping stone in our effort to improve our standards compliance (especially around CSS). Comforting, isn’t it?

Are you ready for the update? If not, you may want to take a look at the IE 7 checklists and adjust your stylesheet hacks accordingly.

When the Eclipse platform emerged a couple of years ago, it looked very promising–especially for Java developers. However, it had a strange interface, a project workflow mentality, and it didn’t seem to handle the typical web stuff very well. The Aptana integrated development environment (IDE) changes all that. It may even have the right stuff to knock Dreamweaver off its lofty perch.

J Wood tipped me off to its excellent JavaScript editing abilities and, indeed, this is where Aptana shines. This is easily the best JavaScript editor I have ever used. Thoughtful features such as Code Assist (pop-ups to help complete your code), built-in JavaScript and DOM documentation, real-time online help, outline views, macro scripting, and built-in support for the major JavaScript libraries (e.g., Dojo, Mochikit, Prototype) make JavaScript coding an absolute joy. This alone should earn Aptana a place in every developer’s toolset, but there’s more.

Aptana is a great all-around web editor that handles HTML and CSS with equal poise. There’s Code Assist for HTML and CSS–which proves particularly useful when coding CSS. Type a pound sign (to start an id selector) and all the relevant id selectors pop up. Ka-chow! Since Eclipse beats as its heart, Aptana can take advantage of the myriad plugins already out there such as the Subclipse plugin for tight Subversion version control integration (I can’t recall hearing that Dreamweaver handles version control as well–and certainly not without cost). This implementation of Eclipse also thoughtfully offers a file view of your local hard drive (obviously understanding that we all don’t necessarily want to start a project to edit code). Aptana runs on the Windows, Mac, and Linux platforms and is noticably faster than Dreamweaver on the Mac.

To be sure, there are some bugs and rough edges in this beta version application. But the pluses certainly outweigh the negatives. Future versions of Aptana are scheduled to receive FTP support, debugging capabilities, PHP and ASP.NET support, HTML validation, and refactoring tools. If you’re a web developer looking for a cross-platform editor to make JavaScript and Ajax sing, Aptana deserves a download and a look-see. Did we mention it’s free?

Create an Ajax desktop just like those found on the Netvibes, Protopage, or PageFlakes sites with a little guidance from MuseStorm’s AJAX Desktop Tutorial. The nine-step tutorial takes you from detecting browsers (IE and Firefox now, Safari later) to creating widgets for RSS and search functions. All that’s required to get started is a little HTML, CSS, and JavaScript experience.