It has wound up being one of the most useful utilities that I have at my web page development/surfing disposal. One of its most useful tricks is the HTML inspector (view screenshot). If you are ever on a page, and are curious about the layout or inner workings of the HTML, just open up FireBug, click on Inspect->HTML and navigate your mouse to the section that interests you. FireBug will highlight the HTML code you are curious about, and you can look at it in all its raw markup glory. You can use this to easily find out how a nifty feature, or a design or layout works-or even to figure out a way around a pesky pop-up JavaScript link when you want to just send a link to someone.

In fact, one of my favorite uses is, when developing DOM interactive JavaScript, I can easily find an object within the entire document. And once it’s found, I can do all the nifty JavaScript manipulation I need.

Now, let’s say that page you’re dealing with is one that you control, or for which you can affect design decisions. You may not have the ability, time or patience to constantly make a change to the code, save it, reload the page, and do whatever various tasks it takes to update the page. And what if you were doing that on a live page and you made a mistake? That’s not a fun thing to fix. Well, once you use the inspector to find the piece of HTML you want to change, you can then click over to the Edit and make live changes to the HTML or the CSS. In this example I changed the size of the picture and added some bolding to one of the paragraphs. Tinkering with a live web page without ever touching the production code-now how fancy is that?

Once you decide on the changes you want to make, and roll those into production, FireBug will also notify you if there are any problems on the page. Green is good, red means that there is something wrong.

This is really a tool that you need to install, fire up and just start tinkering with. You can even take it beyond some of the hocus-pocus we’ve been discussing, and do some performance overviews. FireBug has a built in page performance monitor. With this you can keep an eye on the different aspects of your page, and the time it takes to load. Clicking on the Net tab and reloading the page will give you the stats for the individual components of the page load, and well as the total time to request the page (Performance Monitor Screenshot). You can also click on each request and see the headers of each item that was received. Outside of performance testing your own pages, these headers are a great way to see the cookies, AJAX requests and all the other dirty little details that have passed between the browser and the server.

Two of FireBug’s other exciting features are the ability to go through JavaScript code line by line. You can set up breakpoints and evaluate each step of the code execution, including editing, stack tracing, nested groups and assertions. Additionally, it helps remove one of the burdens of JavaScript development, the “alert debugging” and having to click OK multiple times per page to see how the variables are changing. With FireBug, you can log messages from JavaScript directly into the FireBug Console.

FireBug is the MacGyver tool for web developing, and so, as I said earlier, it really is a tool that you need to explore on your own. The way one person uses one of the tools can be completely different from how someone else works it into the testing and debugging routine. That is really what the power of FireBug is. Download it, explore it - it’s a great little extension that, at the bare minimum, will tell you whether or not a web page is broken!

[1] Wikipedia

The Center for Real Estate and Social Technologies (CREST) is a new research and education program for REALTORS® who use social media in their business. CREST’s first initiative is a research survey that seeks to answer some of the most commonly asked questions about real estate blogging:

• What’s the average number of comments on a post?
• How many posts do REALTORS® write per month, on average?
• What’s the most common blogging platform?
• How many RSS subscribers does the average real estate blog have?
• And much, much more!

If you know of any REALTOR® bloggers in your neck of the woods, please send them to VARbuzz to take the survey. Also, if your communications department would be willing to announce this survey to your members, I’d be happy to provide them with a copy of the aggregate results and the executive summary when it’s ready. It will make for a very interesting story for your blogging agents and brokers!

Contact me with questions ben at varealtor dot com.

It’s a little difficult to wrap your head around it without a demo, so check out this vid: http://www.shiftspace.org/screencasts/intro/index.html

The project is still in relative infancy, but they are apparently building out more “social” features. I imagine that you will eventually be able to subscribe to a feed of the modifications made to webpages as ShiftSpace users modify them. Or subscribe to a feed of the latest modifications made by your friends and other ShiftSpace users. Instead of sending an email to a friend with a link and a note about a page you could send them to the page with your note (and any mods you’ve made) laid on top of the page itself.

I’ve only played around with the app for a little while (username “Mikeadelic”… I made a small edit to www.foxnews.com) but I already see interesting potential for social applications. The business applications are there, but would have to be developed and time-tested like any other social media.

Again, this is more mind-bending on a theoretical level, but it really portends a future where the web is something we can modify to our own personal designs, instead of being simply “served” a webpage we must accept at face value.

… oh, and you don’t need to mention how long it’s been since my last post… i already know =)

I’d love to hear success stories, pitfalls, what to watch out for… anything that will let me peer into the world of LAMPS.

Of particular interest to me is LAMPS’ Website Manager. What kind of front-end code does it output? Is it XHTML? Does it pay attention to web standards? Will I have control of design and layout with CSS? If anyone can relate their experiences with this, I’d be eternally grateful.

What are your experiences, positive or negative, with LAMPS?

At WA REALTORS®, our Communications and IT departments are one and the same. I’m usually involved in bringing certain aspects of our PR campaigns to the web. The Distressed Properties campaign has been no different.

For those of you who attended the Tech Directors Conference in March, particularly those who took part in the Podcasting breakout group, may remember me mentioning the Flash Media Server (FMS) hosting we use for our streaming media. There are a handful of companies out there that specialize in Flash Media hosting… we use a company called Influxis.

So getting back to the Distressed Properties campaign, we produced an hour long DVD for Broker’s to share with agents. We kind of decided as an afterthought that I should prepare a streaming version of the DVD in six chapters for viewing on warealtor.org. So I went ahead and did this last week and officially published it last Thursday (5/29). We have a pretty stripped down account with Influxis that allows for a modest 40 concurrent streams.

So fast forward to Monday morning… we start getting calls from members that they are having issues watching the video. I naively open up my FMS Admin Console and immediately notice our total connections are pegged at 40! We did not anticipate the tremendous response at all! So I was immediately on the phone with Influxis upgrading our account to handle the huge demand. After a quick reboot of my Virtual Host, we were able to host 100 simultaneous streams. Quick and painless for the most part.

But demand kept increasing throughout the day yesterday and overnight so I upgraded again this morning to allow for 200 simultaneous streams! Thankfully working with FMS is pretty easy and Influxis makes upgrading your service a snap as well. It really saved us (me!) a lot of stress.

I realized if we had attempted to host the video locally on our web server it would’ve been toast! There’s just no way it would be able to keep up with demand… we use a Windows 2K3 Server which has no business streaming content! That’s the beauty of using FMS… it’s built specifically to stream Flash files. Not that you can’t host streaming Flash on a generic Linux or Windows server; it can be done but you run the risk of staring down the barrel of a serious crash. Take my word for it.

So next time your association needs to use streaming media, definitely take a look a Flash Media Server. It could save the day and save you a lot of headaches.

You can also buy the FMS software and run it locally if you are so inclined.

Do you have any experiences with Flash Media Server?

Resources:
Adobe’s Flash Media Server Page
Influxis Flash Media Hosting
Flowplayer: Flash Video Player for the Web

This add-on has so many amazing features that I will only introduce you to a few that I use regularly… ones that can save you huge amounts of time in debugging and help make your development cycle more efficient in general.

So yeah, I could gush all day about how much I love Firefox but many of you are likely aware of the power FF packs under it’s hood. Discovering the Web Developer Toolbar a couple of years ago was akin to a spiritual awakening for me… majorly geeky I know.

If you’re a standards practicing developer using CSS to control the presentation of your projects, Web Developer has some amazing features for you. The one that gets my vote for slickest is Edit CSS… which allows you to edit the CSS on your page, or any web page for that matter, in REAL TIME!

I can’t tell you how many times I’ve used this to demo different hex colors or font family’s in a layout. But the fun doesn’t stop there. You can edit whole sections of your layout and see the changes right there without having to edit your style sheet and uploading the changes. Pretty sweet!

A lot of times when I’m randomly surfing and I come across a page that piques my CSS curiosity I’ll often use the View CSS feature to peruse the page’s style sheet(s). This is great to check out what sorts of techniques other folks are using in their CSS… essentially it can be a nice educational tool.

Lets move on and look at Web Developer’s image features…

Taking a look at the image menu, you can see what’s at your fingertips. The feature I use most is View Image Information. It’ll display every single image on a given web page and inform you of its properties… including height, width, file size and any alt properties.

Again not only is this useful on your own projects but seeing how other sites are sliced and diced with images is a great learning tool. One other image feature worth mentioning is Replace Images With Alt Attributes. This’ll allow you to toggle on and off all image content in your page to check, for example, how things shape up in a non-visual web browser… like one a sight-impaired user may use to view your page.

Another very powerful Web Developer Toolbar feature within the Information menu is Display Element Information. This is what sold me when I first started using Web Developer.

Essentially you can think of it as a DOM inspector sort of deal that traverses the DOM for each individual block level element on your page and displays the relationships with its parent and sibling elements. If you look above the tab bar in the photo you’ll see a the box that displays the cascade beginning at HTML and traversing all the way down to your selected element. In addition, a dialogue box (the yellow box in the photo) will appear and tell just about anything you’d want to know about any element in your page. Way cool!

Remember the Edit CSS feature I told you about? Well a complementary feature also exists for HTML, appropriately called Edit HTML which is accessible under the Miscellaneous menu.

This also lets you edit your HTML in real time and preview changes without messing with your text editor and ftp client. It’s kind of similar to the “Try-It-Yourself Demos” over at W3Schools. So if you’ve used that before you’ll be right at home with Edit HTML in Web Developer.

Finally I’d like to touch on the window resizing features in Web Developer. Clicking on Resize, you’ll be presented with options to resize your browser window to an exact width and height. A fresh install of Web Developer will come with the option to resize to 800×600… the old school web design resolution standard. I added 1024×768 as that is the resolution I design for these days.

This feature is so simple yet so powerful that I can’t believe this isn’t a standard feature on all web browsers. Anyway you can easily create any resize dimensions you want by clicking Edit Resize Dimensions… and going through the set-up. You could also theoretically set up the browser window to roughly mimic the size of a mobile device, like an iPhone or Blackberry. The resize feature in conjunction with the Display CSS By Media Type feature (allowing you to view your Mobile Style sheet) can really help when optimizing for mobile devices. The iPhone / iPod Touch however are changing things for the better as the Safari browser on those devices completely ignores Mobile style sheets and basically displays as a mini version of a desktop browser. Designing for mobile devices is really tricky… in fact sometimes a plain (x)HTML document is the most effective way to go.

Well this only scratches the surface of what the Web Developer Toolbar is capable of. I’m continually finding new uses for it so I think the best thing to do, like most things, is to just experiment. I’ve found it to be a huge productivity enhancer and it plays a large part in the development of every project I do.

Web Developer is available for Firefox on both Mac and Windows. You won’t be disappointed!

Download Resources:

Web Developer page at Mozilla.org

Chris Pedrick’s Web Developer page

This post is first in a series dedicated to Firefox Add-ons. Hope you enjoyed this first installment.

How do you use the Web Developer Toolbar?

Check out www.zipvo.com

They are on the all-free, ad-supported model. They’ve got the features everyone loves about youtube; link-to or embed a clip on you site, etc. It’s good stuff, so if you’ve got a “tech-tips” kinda thing in your newsletter, or on you site, they might be something work checking on and informing your members about.

http://www.RealEstateWiki.com.

So how does this move us toward cloud computing?

Simple – the more offline functionality you can imitate on the web and the more services you can connect through standard (and open) protocols, the closer we can get to doing all necessary tasks through a browser. When you combine the Apps Engine with Google Gears you can even create online apps that continue functioning in an offline setting. Even when I think about the current state of the web I have a hard time thinking of things I CAN’T accomplish online; I can listen to tunes, play games, store files, chat, compose letters / spreadsheets and, of course, email. (Side note: serious gamer-types are gonna say you can’t replicate and deliver the latest games through the web… well you’re right, at least until the new Internet makes it’s way to the masses.) Recognizing this trend toward the browser as the single most important piece of software, there are even motherboards that quick-boot (in about 5 seconds) into a Linux-based browser, bypassing the cumbersome Windows OS altogether.

So why is this significant? Well, I used to have a desktop because I wanted big hard drives, different types of removable media drives, and lots of processing power. Then I got my laptop which had less power but was lighter… not light and portable enough for my taste, though… and all I use in terms of removable media is the occasional DVD-r and my USB stick, plus online storage. Once I no longer need even physical media I will feel truly liberated (umm, in terms of where I can compute, that is) with ubiquitous access to my “desktop” wherever I go. No hardware to upgrade, no software to update except a browser, no worries about hard drives failing, and no fears about having a laptop stolen because there’s no resident data!

The counterpoint to this is always the privacy issue… I’m always conflicted when it comes to giving out personal info to access a service. But when you look at where we are *already*, it’s rarely a valid concern. Private companies know us better than we know ourselves, and we’ve been ok with that for years. If we use a cell phone we can be geo-located anywhere, anytime. Jebus! Even SIGNING UP for a cell phone involves a down payment of your first-born, with interest payments of all your text messages stored FOREVER. Personally, I’ve given up trying to stay off the grid /radar/ map, what-have-you. It just can’t be accomplished these days, and we can’t go back to simpler times even with some kind of “Fight-Club-Esq” global purge.

Where was I… oh yes, Google Apps Engine… cloud computing… it’s cool. And it will simplify our lives. Not just as consumers, but (for those reading this blog) for IT admins, developers, graphic designers, and anyone using the web today… which is, well, everyone!