January 27, 2007
Debugging on Safari
Much of this will come as old news to Mac web developers, but those who work primarily on WinOS may benefit from the following Safari debugging tips.
Like Internet Explorer on Windows, Safari has come pre-installed on every Mac for a few years now, and as a result, can be considered the most commonly used browser on that platform. While Safari boasts some of the best standards support out there, DOM manipulations can be a bit finicky. Further, the browser itself is optimized for the general user, and, at first glance, doesn't have some of the features professional web developers rely upon for debugging problems.
However, underneath-the-hood utilities and free third party additions show developer love that make debugging the platform much easier.
One unique Safari feature that is useful to developers is the Activity Window. This window shows your page objects in a collapsible list view. Double-clicking an object listing opens that object in a new browser window; option-clicking downloads it. The list shows object file sizes and is updated in real-time. I often use this as a diagnostic tool and shortcut to access scripts, css and swf files for testing and version checking.
The Hidden Debug Menu:
As it happens, Safari comes with a set of debugging tools that are hidden by default. Most of the tools are useful only to Safari and WebKit engineers, but a few will come in handy for us once we can access the menu. Enable the Debug menu by opening the Terminal and entering the following string, hitting return and then restarting Safari:
defaults write com.apple.Safari IncludeDebugMenu 1This adds a line to Safari's preference file; on next launch Safari will expose the Debug Menu to the right of the Help Menu.
If the Terminal makes you a bit uncomfortable, Safari Enhancer is a free util that enables the Debug menu, along with other customizations you might find useful or amusing.
Items in the Debug menu useful to web developers and testers include logging and showing Javascript errors, switching user agents, and possibly, Page Load Testing. Double-clicking on an an entry in the error console will open to the offending line in your source view.
Third party additions:
Speaking of source view, I also use Kasper Nauwelaerts' free Safari Tidy plug-in, which automatically validates pages, adding an icon and error/warning/success info to your status bar, line numbers and an error/warning view to your source window. Clicking on the status bar icon opens your source view and double-clicking on an error or warning takes you to the line in question.
Les Nie's Safari WebDevAdditions adds a slew of options similar to Chris Pederick's well-known Web Developer Extension for Firefox. Besides the usual show/hide/outline objects, you can view image dimensions, make the entire page editable, and employ an interactive Javascript console.
Apple resources:
Safari is in constant development via the WebKit Open Source Project; many dhtml bugs continue to be identified and addressed in WebKit, with Safari benefiting with each version upgrade. WebKit nightly builds are available, and while WebKit should not be used for general testing, it can be useful for reality-checking problems you suspect lie in Safari instead of your code. Should you find a bug that renders properly in a WebKit nightly but fails in the latest Safari, you might save valuable debugging time and move to a different approach that does work in Safari.
WebKit also includes a nod to web developers with Drosera, a Javascript debugger, and the Web Inspector, which "allows you to view the live DOM hierarchy in a compact HUD style window" and is very, very cool. I suspect we'll see both of these tools in the next official Safari release, but we will probably have to wait for Leopard, reportedly due in Spring.
Lastly, Apple's Safari Developer Connection has a FAQ that may answer some of your support questions.
January 17, 2007
Rich Mail: Sturm und Drang
Last week saw much developer/designer hand-wringing and hair pulling as the news became generally recognized that Outlook 2007 would no longer use IE to render rich email. Microsoft chose to decouple Internet Explorer and instead use Word's much more limited but perhaps more secure html engine, announcing the change in August of last year during the beta where few of us took notice.
Till now. Proscribed from future rich mail campaigns are background images, plug-in content (never a good idea to begin with), CSS positioning and floats, form elements and more, described in Microsoft articles Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 [1|2].
Shops hoping to take advantage of IE 7's improved standards support in the next version of Outlook, available now as a test-drive download and in a few weeks in atomic form, now face the prospect of scaling back existing designs and explaining to their clients why they must do so. I've so far been unable to find projected adoption numbers, but I think we can expect Outlook 2007 to be as successful as its predecessor and, over time, to replace the older, more HTML/CSS-capable versions without much attrition in the market place.
January 12, 2007
Coming to a (full)Screen Near You
An entry on Flash Player 9 is regrettably overdue; version 9.0.16.0 was released in June of last year, a Universal Binary for MacIntel users followed in August (9.0.20.0), and November brought both a public beta of the Linux Player (9.0.21.55) and a Flash Player Update providing Vista compatibility and full-screen chrome-less playback (9.0.28.0).
This latter feature is what I want to focus on today, but I have to at least briefly mention some of what became available in the June release: A re-engineered virtual machine and ActionScript 3.0 offer new capabilities with up to a 10x performance boost (when using AS 3.0). Applications that can now be built in Flash include crazy cool stuff like real-time audio visualization, a remote desktop VNC viewer and even a Commodore 64 emulator(!). Emerging 3D libraries are being ported to AS 3.0 to take advantage of the performance boost.
However, I predict that the early sell is going to be that full-screen, chromeless, immersive playback from your client's web pages.
The immediate and obvious candidate for full-screen content is video, but panoramas are quite impressive when filling your entire display. I'm sure we'll see games, presentation applications and much more as Player 9.0.28.0 penetration approaches critical mass [more on this below].
Security concerns impose a few constraints: Entering full-screen mode requires an explicit user choice to do so via a mouse click or key press; a standard message on how to exit full-screen mode is displayed for all in a tasteful, OS X-like transparent overlay that fades out after a few seconds; all keys are disabled in full-screen mode except for the ESC key, used to return to normal display mode if you don't provide a button yourself. More on this and implementation details can be found in the Adobe Developer Center Exploring full-screen mode in Flash Player 9 article.
Example screen-grab taken from Papervision 3D's AS3 Cubic Panorama demo:
Full-screen video quality, as always, is dependent upon the source material but scales well. If you already have content hosted on YouTube or Google Video, you can test how things hold up full-screen using Wilbert Baan's Flash 9 Update demo. Simply supply the YouTube or Google video codes and Baan's swf will trigger a full-screen preview of your content.
If your existing footage doesn't cut it at larger sizes and you have the support of broadband users, you can always provide a higher-quality encoding. Some good examples to check are a BBC Motion Gallery from FlashGuru and some HD clips from HDV Underwater, via the Adobe Labs Flash 9 Update wiki page.
Full-screen panoramic examples can also be found at the Adobe Labs wiki. Flashpanorama.com site offers two samples (click and drag to pan, allows zoom-in and out) and Papervision3D.org has a nice cubic panorama example (takes a while to load, pan follows mouse). Neat stuff, this.
So when can we use this stuff?
Adobe's June 2006 Flash 9 press release offered an expected 80% adoption rate in 12 months. Aral Balkan reports from the FlashForward keynote at MacWorld that Flash Player 9 is projected to reach over 70% penetration in its first six months, a continuing acceleration over past player version adoption rates.
How are we doing?
For the month of January, AWStats and Google Analytics show this site currently serving around 91% Flash Player capable traffic, of which 70% are using Flash 9. Of that 70%, @ 22% can view full-screen content.
At the office, I find that Flash Player capable January visits to Threespot Media's home page show 84.5% Flash 9, out of which 24% can already handle full-screen content.
This is an admittedly small sample and YMMV, but does suggest that Adobe's new projections are reasonable and that the time is right to take a close look at what Flash Player 9 can bring our clients. In the case of full-screen content, it is easy enough to detect which player version our visitor is using and present a full-screen option if we're sure it can be taken advantage of.
One last note: As Flash 9 authoring isn't out yet, to create AS 3.0 content you must be a Flex 2 developer or, if you are a registered Flash 8 Pro user, you can download the Flash Professional 9 ActionScript 3.0 Preview; essentially Flash 8 Pro with AS 3.0 compiling.
January 6, 2007
To Dream, Perchance to Host
Employee owned DreamHost is offering their Strictly Business hosting plan free-for-life for US-based 501(c)(3) [read: non-profit] organizations. This bears repeating -- that's free-for-life hosting! If you have NFP clients who are looking for or are paying too much for Linux shared hosting, whose needs map to the offering, or are already a paying DreamHost customer, you can be their hero.
I've long heard good things about DreamHost, and over the holiday break moved informationgift to their Crazy DomainInsane! plan (check out the features/price and you'll understand the name). While their web control may not be as polished as Media Temple's or even 1and1's, it's a fully functional, developer-friendly no-nonsense tool and the DreamHost support Wiki, run by DreamHost and DreamHost customers, simply rocks.
Which is a good thing, because DreamHost doesn't offer phone support. Note that this could be a show-stopper for some; you're going to have to judge your NFP client's needs and comfort level with this vis a vis cost-free hosting. I suspect many non-profits would rather spend hosting dollars on their cause, while others may be able to justify paying extra for dedicated hosting and 24x7 phone support.
Of course, this last point could be said about commercial clients as well; price/features/performance vs. support level is part of an equation that needs to be solved in every hsp selection process.
Another factor that may need consideration is your comfort level with the DreamHost philosophy -- these folks are no suits and won't wear cologne, but their 10-year journey from four CS undergrads with a single server to a 700-server datacenter hosting 350K sites is a story in which I'm so far excited to share. I'm also bohemian-geek enough to appreciate their style and sense of humor, but ymmv, etc.
