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 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.

Need to center a couple of words on a page, horizontally and vertically, with web standards compliant code? In the days of dinosaurs, it was pretty simple (example 0):

Read the rest of this entry »