Panic - Coda - One-Window Web Development for Mac OS X Originally downloaded April 24, 2007. Would you like an application specifically designed for building websites, with an interface that draws direct from Apple's much-admired Xcode and Dashcode tools? It looks like you just got your wish, from Mac developer Panic (Transmit, for example). Code is brand new, and its website is worth a visit even if you're not a web developer. If they developed this site in Coda, I'm signing up now! Cutting edge Ajax, cool graphics and javascript effects work seamlessly to pull the website together in any easy-and-fun-to-navigate package. Coda is supposed to cover site management (including built-in FTP), text editing, preview functionality, CSS support, and integration with the command line. Quite a bit more sophisticated approach than iWeb, to be sure! It retails for $89, but if you're a Transmit 3.0 licenseholder, it's yours for $69 now.

Version as tested: 1.0.

Update 8/14/12.

Coda is no longer a new application... in fact, it's now up to version 2.0 and going strong. Even though I don't use Coda myself (I use Espresso for web code editing), highly recommend it for web development. It's full of great features, and with the long list of plugins it can do just about any coding task — from HTML and JavaScript to PHP and Ruby. It has integrated preview and even built-in reference material in the form of its own hypertexted eBooks. Coda also handles CSS editing quite well... though I prefer Espresso for this. Coda has the advantage over Espresso in terms of developer mindshare and third-party support, though the latter has quite a range of plugins as well. You can't go wrong with either of these, and I can fully see why Coda is so popular. Great Mac software! My only criticisms of Coda are its complexity and its price. Now at $99 a pop, its license seems a bit high to me.

Safari HTML5 Audio and Video Guide: About HTML5 Audio and Video. This is a good reference with lots of sample code for using HTML5 audio and video. The samples cover a wide range of possible custom applications. Though it's specific to WebKit/Safari, many of the CSS styles used for custom appearance are now supported by Firebox and, of course, Chrome (which is a WebKit browser like Safari).

How to play sound from a web page - UCL. From a website devoted to speech, hearing & phonetics, this is an excellent rundown of the various ways webmasters can add an audio file to a web page. Great examples and clear code for each of the 10 methods.

In the past few years, Adobe Flash has become more than an annoyance that some of us have kept in check by using "block Flash" plugins for our web browsers. More and more, entire web sites are being built with Flash, and they have no HTML alternative at all! This goes way beyond annoying, into the realm of crippling.

I had noticed the trend building for quite awhile, but it only really hit home when I realized that Google, of all companies, had redesigned its formerly accessible Analytics site to rely heavily on Flash for displaying content. This wouldn't be absolutely horrible except for the fact that Google provides no HTML alternative. I tried to needle the company through its Analytics forums, but only received assurance that yes, indeed, one must have the Flash plugin running to view the site.

Keep in mind that content like that on Google Analytics is not mere marketing information, like the sales pitch on the Analytics home page.

Those of us who are disturbed by the trend need to be a bit more vocal about our opinion. Hence, I'm starting a "Just Say No To Flash!" campaign, with its own web page, graphics for a banner, and the CSS and HTML code to deploy it on your own web pages.

I've mentioned this to some of my family and friends, and they often come back with: "So, Why should I say no to Flash?" I admit that as a power browser and a programmer geek type who, shall we say, makes more efficient use of the web, I'm more keenly aware of the ways that Flash is chipping away at the foundation of web content.

In the beginning, it seemed harmless: Flash was an alternative to animated GIFs, and an easy way to embed movies on web pages. But then advertisers wrapped their meaty mitts around it, and that's when Flash started to be annoying. However, one could block Flash in the browser, as part of a strategy of shutting out obnoxious advertising.

But publishing content via Flash is just wrong, for a number of reasons.

➠

It's A Proprietary Technology

. . . Or, One Company Controls The Standard

I don't think Flash is what Tim Berners-Lee had in mind when he created the first web browser and the markup language called HTML to run the web. Then, as now, the web is meant to be open to all. It is meant to be built using open standards that belong to no individual or company. The main open formats that should be used to build websites are simply:

• HTML
• CSS
• JavaScript
• Images (open formats)

Open standards for video, audio, vector graphics, virtual 3D graphics, animated graphics, and others are also available to be thrown into the mix.

Adobe PDF is also a common format for distributing final-form documents, and PDF is based on open specifications for both PDF and PostScript that Adobe published back in the 1990s.

➠

It Isn't Backwards-Compatible

. . . Or, How Many Times Do I Have To Upgrade My *!/?#%@! Plugin?

If you install a Flash plugin today, there's no guarantee you'll be able to view Flash content created 2 months from now.

If you have a Flash plugin from 5 years ago, it's probably useless today.

Flash is designed with built-in obsolescence, forcing users to repeatedly visit the Adobe website to get an upgrade. This is not only a bother, it forces one company's advertising into the world's face every time it releases a software update.

➠

It Can't Be Customized

. . . Or, How Do I Increase The Font Size?

From time immemorial (well, at least since the beginning of web time), a web page's text could be customized to suit the user's taste and needs. All web browsers provide the tools to increase/decrease the font size, as well as to specify custom fonts for different page elements (headers, paragraphs, etc).

Flash throws all of that out the window with a terse shrug, "Let 'Em Eat Helvetica 10pt."

➠

Its Content Is Inaccessible

. . . Or, How Do I Drag And Drop Images and Text?

No, you can't drag and drop images or text from Flash content. This most basic method of interacting with a web page—dragging images off the page, or selecting sections of the page to drag onto an email or text processor—is a non-starter if it's part of a Flash file.

Copy and paste? If the Flash programmer has been thoughtful, you should be able to copy and paste text. But don't even try to copy any other page element.

And that includes copying a link's URL. Right-click (Ctrl-click) anywhere in a block of Flash content, and you get the standard Flash popup menu. Not very helpful.

➠

You Can't Save The Page

. . . Or, You Mean, I Can't Save A Copy?

Another common task many web users take for granted is the ability to save a web page as text, as HTML, or as a format like rich-text format. With Flash, this is impossible.

You may be able to save the file as a web archive, but there's no open standard for a "web archive," and getting at the content inside one is almost as hard as getting inside a Flash movie.

➠

Flash Consumes More Of Your Computer

. . . Or, Running Flash Diverts Your Processing Power and Memory

When I'm running Flash — as I am now while shopping at Adobe — my Activity Monitor shows it's consuming a continuous 5-percent of my processing power, and about 130 MB of my RAM.

For What? There's nothing a Flash movie can deliver that can't be delivered using open formats. its heavy resource drain is one reason I keep Flash turned off when browsing the web.

➠

You Can't View Flash on an iPhone or iPad

. . . Or, I thought Apple was the bad guy here?

Apple has very good reasons for not supporting Flash on its tiny devices. As the previous point makes clear, Flash isn't a delicate, lightweight technology that your processor and RAM won't notice.

When trying to build hardware and software for small devices that work well and don't lead to memory problems or application crashes, why wouldn't you ditch unnecessary technologies like Flash?

Obviously, Steve Jobs stepped into a hornets nest here, but I think the hornets were wrong.

Make Your Site Say No To Flash

It's easy! Just follow these two steps:

1. Download the Image(s)

You can copy and save one of the following images, or download the Photoshop source and make your own.

2. Add the CSS

Here are two CSS styles for positioning the Just Say No To Flash banner on your web page. One positions the banner at the top-right, and the other at the bottom-right. To use the styles, just copy and paste the following code into the <HEAD> portion of your HTML.

To place the banner at the top-right corner of your page:

1. <style>
2. a#noFlash {
3. position: fixed;
4. z-index: 500;
5. right: 0;
6. top: 0;
7. display: block;
8. height: 160px;
9. width: 160px;
10. background: url(images/noFlashTR.png) top right no-repeat;
11. text-indent: -999em;
12. text-decoration: none;
13. }
14. </style>

To place the banner at the bottom-right corner of your page:

1. <style>
2. a#noFlash {
3. position: fixed;
4. z-index: 500;
5. right: 0;
6. bottom: 0;
7. display: block;
8. height: 160px;
9. width: 160px;
10. background: url(images/noFlashTR.png) bottom right no-repeat;
11. text-indent: -999em;
12. text-decoration: none;
13. }
14. </style>

3. Add the HTML

Add the following to the beginning of your HTML, just below the <BODY> tag, or at the end, just before the closing </BODY> tag:

1. <a id="noFlash" href="http://www.musingsfrommars.org/notoflash/" title="Just Say No To Flash!"> Just Say No To Flash! </a>

Please always link your image to http://www.musingsfrommars.org/notoflash/ so everyone can find the information associated with the image.

Thanks to the "Too Cool for Internet Explorer" campaign run by w3junkies for the concept behind "Say No To Flash," as well as for the general outline of information that campaign provided.

One of the many challenges of building a usable black theme for Mac OS X is making it work with web pages. If you use Safari, the buttons, scrollbars, and other interface widgets on web pages get their marching orders from the system's graphics files—the same ones that regular applications use.

So, if a web page has a pushbutton, the button will by default take on the style of the active theme. If you're running Crystal Black, this means that the button inherits the Crystal Black style. We like this.

Color for the button's text, on the other hand, gets its marching orders from the browser's default Cascading Style Sheet (CSS) file—which, naturally, makes the text black, and therefore unreadable on top of a black button. We don't like this.

On first glance, the solution seems to merely design a special CSS file for Crystal Black and make Safari use it. And that does work for many web sites and many buttons. However, many folks who design web pages like to fiddle with the CSS style for their pages' buttons, and such fiddling means that there's nothing "mere" about designer a Crystal Black style sheet.

Further, many Mac applications these days have views that are simply embedded web content using Apple's WebKit framework. The practical implication here is that Mac apps don't know how to read a Crystal Black CSS file, so Crystal Black must do some fiddling under the hood to avoid having unreadable buttons in such web views.

Then there's Safari itself. I really wanted to theme the Web Inspector—the incredibly useful built-in website viewer/debugger/designer assistant—with the Crystal Black look and feel, but it wasn't immediately obvious how to do this. I assumed that the tool was just a part of Safari, and therefore built with classes and widgets from the Cocoa AppKit (which is the framework all Cocoa apps are built with). However, when I began to inspect the Inspector, I discovered that everything contained within its borders was simply web content: HTML, CSS, JavaScript, and images.

In other words, the Web Inspector tool is nothing but an intricate, sophisticated, and extremely well designed web page!

Having built a Crystal Black CSS file for web pages in general, and with my past expertise in CSS, I attacked this challenge with relish! It reminded me of the time I realized that Dashboard widgets are, at their core, nothing but little web pages (as are simply apps for the iPhone). In tackling this one, the main question was, How should the various elements look? And the hardest part was inspecting the various parts in of the Inspector in great detail to determine which CSS rules governed their default appearance and behavior.

As I discovered, the WebKit has a a sub-framework called "WebCore," which in turn has a folder of resources specifically for the Web Inspector. In the Inspector folder, among other things, is a suite of CSS files that handle different aspects of the Inspector's design and behavior. Of these, the primary one I needed to tweak was called simply "inspector.css."

Besides controlling the usual attributes of a web page—document elements, text elements, image elements, layout elements, form elements, and so on—this style sheet applies various advanced CSS properties that serve the purpose that in years past would have been handled by many individual images. As I've described this CSS 3.0 magic previously, there's no longer a need for using graphics and JavaScript to add box shadows, rounded box corners, borders, gradients, and reflections to your web pages.

Naturally, since the open-source WebKit project was initiated by Apple, and since that project zoomed ahead of all other browser engines in developing new ways to design with CSS, that's how the Web Inspector is built. This approach—using a command syntax rather than images to design a user interface—is one that Apple has been adopting for its desktop applications. In recent years, Apple has been adding new classes and methods to the AppKit that make it a trivial matter to build a window frame, a border, a toolbar, or a button using code rather than individual graphics. 

While this is a logical and efficient approach, it also presents challenges for theming Mac applications, a challenge that Crystal Black is often unable or unwilling to overcome. (The story of all the challenges in building Crystal Black are described in this article.)

Not so with the Web Inspector, fortunately.

The Inspector does use a few images in its design, but most of the toolbar, separators, and section headers are built with CSS gradients. Very cool indeed!

This bit of Crystal Black will eventually be bundled with the whole theme, but for now I offer it as a free download. Admittedly, the audience for such software is small—you have to like Crystal Black, and you have to be a regular user of the Web Inspector—but it might be of interest to others who are curious about how such things are done.

One caveat in viewing the screenshots... The scrollbars that appear, as well as the HUD window style, are part of the overall Crystal Black theme and are not part of the Web Inspector theme itself.

Enjoy!

Update 4/18/11: The full Crystal Black 1.0 theme is now available from the Crystal Black website.

Installing Crystal Black for Web Inspector

The download contains a small application that you can use to install—and to uninstall—the theme. Simply double-click and select "Install" to apply the theme. Or select "Uninstall" to restore the default CSS files and graphics.

After installing or uninstalling the theme, you'll need to quit and restart Safari for the theme to take effect.

Crystal Black for the Web Inspector (Download file is 1.0MB)

scripty2: for a more delicious web. Scripty appears to be a new version of Scriptaculous that incorporates support for more advanced CSS features and HTML 5. Now in beta, which is available for download. Has good documentation and a few interesting demos.

Home of SMF: Free PHP and MySQL forum software. Several customers have asked me to set up a forum for users of CrystalClear Interface, and I've got it on my to-do list. I ran across a site that uses SMF today, and it looks like it might be the ticket. I'll have to check out some other candidates, too, of course.

Surfin’ Safari - Blog Archive » Styling Scrollbars. I've been so busy I missed this... it's another in the WebKit team's aggressive expansion of the possibilities for user interface development using the basic stuff: HTML, CSS, and JavaScript. The brief article on the Surfin' Safari blog has a pointer to an interactive demo.

nib2cib - Cappuccino nib2cib is a command line tool designed for converting Cocoa’s nibs and xibs to  <a href="http://cappuccino.org/">Cappuccino</a>’s cibs. (If you aren't familiar with  <a href="http://developer.apple.com/documentation/developertools/Conceptual/IB_UserGuide/Introduction/Introduction.html">Interface Builder</a>, Apple's application layout software, I'm sure that xibs, nibs, and cibs are glibly inscrutable. No worries. It's not required unless you're going to be working with Cocoa anytime soon...) This means you could layout your interface in IB and then use nib2cib to convert the IB output for use in Cappuccino. Pretty cool!

Compass Compass is an open-source project built on Rails that's currently in development. It proposes to provide a full-fledged framework for CSS stylesheets, whereby you would store data in Compass and then generate styles as needed for your various website projects. Compass also anticipates the need to use CSS as one way of including semantic data with your website.

Atlas - 280 North. The Capuccino project seems to be growing by leaps and bounds. In addition to the amazing presentation app the project published earlier in the year, they have now demoed an equally amazing tool for actually building Capuccino interfaces and wiring up their functionality. From what the demo video shows, Atlas is going to be Interface Builder on steroids! Maybe Apple will even learn a thing or two about the direction they should be going with their developer tools for Cocoa apps. For now, you can sign up to be emailed with progress info about Atlas, which is still in testing.

ccgus's jstalk at GitHub

Here's the latest offshoot of the jsCocoa universe: JSTalk is a scripting language that can be used to easily interact with Cocoa apps. It's what Applescript would be if rewritten today using Cocoa and JavaScript. The download comes with a slew of example scripts and a script editor application.

JSCocoa — A bridge from JavascriptCore to Cocoa

On the heels of learning about Cappuccino, here's a project that lets developers access Cocoa from within JavaScript! Natch, it's open source, with documentation on on a google code site.

280 Slides - Create & Share Presentations Online

OK, this has to be the coolest web app I've yet encountered. So desktop-like you forget it's running in your web browser! Part of that must reflect its software foundation, which isn't javascript or flash or Air, or any of the other possible languages for Web 2.0-style apps. No, it's Cocoa--the same language (a derivative of Objective C) and framework Apple uses for its desktop apps!

The framework used is called Cappucino, a fairly new open source project that "makes it easy to build desktop-caliber applications that run in a web browser."

I'm all over this... definitely!

classy:web - id and class extractor

Classy is an online application that takes a URL and parses it into a very useful list of all the CSS classes and IDs on the page. It breaks the classes down to show what HTML elements they're tied to, and does the same with each ID. Besides using the website version, you can also add Classy to your browser toolbar and run it on any web page you happen across.

Classy isn't a replacement for tools like FireBug or WebInspector, but it's a highly useful supplemental tool that gives you a quick overview of a web page's CSS structure that you can't easily get with those tools.

FancyBox - fancy image zooming tool

I keep running across cool and useful JavaScripts that emulate Apple's zoom boxes, which it uses for adding detail about products or showing larger versions of thumbnails. This is a new one to me. It doesn't have the nice rounded corners of Apple's but does have some features my other fave lacks.

Speaking of which, the script I've been using lately is FancyZoom... the variant that works with Prototype and jQuery and doesn't pull images in using Ajax. The original version of FancyZoom is also cool, more like Fancy Box.

SproutCore is Apple's Flash, Silverlight-killer - Mac software - Macworld UK Sproutcore is a new Ajax/JavaScript framework being developed as an outgrowth of Apple's new MobileMe product. It's also part of the ongoing rapid development of the iPhone development platform and the WebKit browser engine that forms the basis for Safari. To call it a "Flash killer" is perhaps a bit overstating the case, but judging from the demos on the Sproutcore website, it appears to be on its way to being a robust rival to more mature frameworks such as Ext.js. I've installed Sproutcore and look forward to playing around with it soon.

Why 'no Macs' is no longer a defensible IT strategy | InfoWorld | Analysis | 2008-04-21 | By Galen Gruman This article is a must-read for anyone who cares about the longstanding problem of getting enterprise IT staff to support Macs. If you can get them to read the article, published by a major and highly respected IT trade journal, you may change a few minds. The author runs down all of the issues that kept Macs out of the enterprise in the past, and effectively addresses the concerns, some of which have been outdated since the release of Mac OS X.

My only quibble is the author's assertion that enteprise reliance on Microsoft Office means unequal time for Macs. He points out that OpenOffice is a viable alternative but makes no mention of Apple's own terrific iWork suite, which is quite compatible with the basic aspects of Microsoft Office. Likewise, he fails to acknowledge Apple's effective collaboration suite in the form of iCal, Mail, iChat, and Address Book. Perhaps it's because those aren't cross-platform. However, even if that's the case, since they are able to interoperate with Office, they should be considered by businesses seeking to support their growing numbers of Mac users.

A lot has happened in the world of web browsers and CSS 3.0 since I wrote this article last summer at the time Safari 3.0 became available as a public beta. Besides WebKit/Safari, Opera, iCab, Konqueror, and Firefox have all made progress in adopting CSS 3.0 specifications, the next generation of the W3C's Cascading Style Sheets standard.

However, the WebKit team continues to lead the pack, as they have since I first contemplated this article over a year ago. In the last 6 months, that team has not only adopted more of the CSS 3.0 specs ahead of the others, but they have proposed several exciting new specs of their own, which the W3C is taking up as draft recommendations.

In addition to updating the state of CSS 3.0 in WebKit/Safari, I've also added some new demos for the Backgrounds section of my CSS playground at the end of the article.

Here are the CSS 3.0 features I wrote about in July 2007:

1. Box-shadow: Yes! Add drop shadows through CSS!
2. Multi-column layout: Can we really do this now? With HTML?
3. Resize: Give JavaScript hacks a rest and let users relax when typing input on web pages.
4. Rounded corners: The corners of any
   element can be made round to any radius you specify.
5. Colors with transparency: There goes another ugly hack from way back!
6. Background image controls: Remember how great it was when you could add images as well as colors to an element's background CSS style? Well, it's about to get a whole lot better!

And since then, WebKit and Safari 3.1 have adopted the following bleeding-edge CSS features:

1. Adopted last October, WebKit introduced its first take at CSS Transforms, which it has submitted to the W3C for consideration. With CSS Transforms,
   s can be scaled, rotated, skewed and translated... all without using JavaScript!
2. Announced at the same time is the equally exciting implementation of CSS Animations. At the moment, the only type of animation that's documented and demonstrated on the WebKit blog is based on CSS Transitions, which let you define how an object or attribute changes over time from one state to another. Using this specification, you can now program many kinds of animations with CSS alone.
3. Also in October, WebKit added the CSS Web Fonts feature, which lets designers beam fonts to users through CSS and HTML, approximating the capabilities of PDF in a much lighter-weight form.
4. Then, after a lull, things started to heat up again last month, when Apple released Safari 3.1. Safari 3.1 incorporated all of the CSS 3.0 features WebKit had pioneered earlier, plus it added a bunch of things the WebKit team hadn't blogged about. Chief among these was support for CSS Attribute Selectors. This is something of a holy grail to advanced web developers, since it opens up a whole world of possibilities for using the Document Object Model (DOM) to build better web interfaces. When released, WebKit was the first and only browser to fully support this geeky, but highly practical feature. (Some of the other browsers have implemented partial support.)
5. And then, just today, WebKit added support for CSS Gradients to its portfolio. Gradients are not yet a CSS 3.0 specification, but they are part of the HTML 5.0 spec. No doubt Apple's implementation will be referred to the W3C for consideration. (This is the only new feature in this list that as yet works only in the latest WebKit nightly build.)

This article lists the CSS 3.0 features that were first available in Safari or the nightly WebKit browser. Besides listing them, I've tried to keep up with what the features can actually do for me as a web designer, so each feature is accompanied by a demo or two and some explanatory notes. Since some of the features are a bit complex, and almost totally lacking in documentation from either W3C (which only lists the standards, not the implementation details), Apple, or the WebKit team, I've had to experiment to discover what some of the attributes do.

Fortunately, a forward-thinking group of techno-weenies is keeping a close eye on the emerging details of the CSS 3.0 implementations, and they have done some experimenting of their own. Since they're in the same boat I am (actually, they have a much better boat!), it's not surprising that I'm finding ambiguities in the way they've built some of their demos. Still, it's the closest thing to documentation that I've found, and I highly recommend that anyone interested in learning more about CSS 3.0 pay a visit to the terrific CSS3.info website. In fact, you'll find links to their pages throughout this site.

Following CSS3.info's lead, I'm organizing the (at this time) CSS 3.0 available in Safari into four categories: Borders, Background, Effects, and User Interface. These correspond to the W3C draft modules for CSS 3.0. The fifth tab in the navigation control below gathers the CSS 3.0 specifications that have been implemented by Safari and at least one other major browser. As you browse through these up-and-coming features, I think you'll understand my excitement about the benefits they offer to web graphic- and user-interface designers.

In the first release of this article, I only had demos for the section on Borders. Today I've added demos for CSS Backgrounds, and I plan to continue experimenting with the rest as time permits. In the meantime, as mentioned before, do pay a visit to CSS3.info for their demos of each, or follow the links to demos at the WebKit site. I hope you're inspired to take up a keyboard and pound out some experiments of your own!

Apple - Support - Downloads - Safari 3.1

This update brings in all the latest standards implementations and innovations in the open-source WebKit project, plus a few interface enhancements as well. The Windows version gets some important updates too. From Apple’s tech document on Safari 3.1:

Performance

• Improves JavaScript performance

Standards

• Adds support for CSS 3 web fonts
• Adds support for CSS transforms and transitions
• Adds support for HTML 5 <video> and <audio> elements
• Adds support for offline storage for Web applications in SQL databases
• Adds support for SVG images in <img> elements and CSS images
• Adds support for SVG advanced text 

Developer

• Adds option in Safari preferences to turn on the new Develop menu which contains various web development features
• Allows access to Web Inspector
• Allows access to Network Timeline
• Allows editing CSS in the Web Inspector 
• Allows custom user agent string
• Improves snippet editor

Other

• Double clicking on the Tab Bar opens new tab
• Includes URL metadata when images are dragged or saved from browser
• Opens Download and Activity window in current Space
• Supports trackpad gestures for back, forward, and magnify on MacBook Air and compatible MacBook Pro computers
• Shows Caps Lock icon in password fields

Apple Developer Connection - iPhone for Web Developers - Optimizing Web Applications and Content for iPhone I now see how Apple plans to make its standard for web "widgets" the de facto industry standard: Through the iPhone! Since widgets are now the only way third-party developers can get applications onto users' iPhones, and since Apple's released Safari for Windows, anyone can develop widgets, Apple-style, and they have an incentive to do so. Certainly, I'll be adding this onto my to-do list, and this document is an excellent starting point for learning how to do so.

Effect.Transfer I really like this effect! It reminds me of ones I'd seen on the terrific TiddlyWiki app as well as the Ajax-y BloxPress blog system for WordPress. It may come as no surprise, in fact, that the effect was developed by the author of BloxPress... as well as numerous other cool web goodies. This effect is intended to augment the collection that comes with Script.aculo.us, and the author provides several useful demos on this page.

Table Sorting with Prototype * Dexagogo This looks like a cool add-on to Prototype.js that enables column-sorting in tabular presentations. There are a slew of great demos for the various techniques you can use. A further add-on to Tablekit gets you column-reordering, but what I really want next is row-reordering. Probably out there already and I haven't seen it yet...

riiv.net» Blog Archive » MindFrame - Demystifying Rich Internet Application I've admired Spry since it first began evolving a year ago, and if you want to deliver data to users through a small XML data file, it's one of the best ways to do it. Now MindFrame is designed to bring those benefits to the growing Prototype.js universe. It also relies on a new open source library called ZParse, which apparently lets you define your own JavaScript parsing language. How cool is that?

AppleInsider | Mac users' Web 2.0 affinity seen driving Apple share gains Here's a study that reinforces my intuitive sense that what we're calling Web 2.0--that evolution of web user interfaces to mimic the rich interactivity of desktop apps--is being adopted much more rapidly by Mac users than by their PC counterparts. Not only that, but it concludes that the other argument I've been making---that the user interfaces one sees in Web 2.0 applications---are derived predominantly from the Mac OS X Aqua interface, largely because there is a much higher percentage of Mac developers of such sites than Windows ones. This also reinforces a larger feeling many Mac users have that this community is more enthusiastic about computing generally and has much higher expectations for the way it works and the things you can do with it.

Loupe.js This is the greatest little demonstration of the Canvas tag I've seen yet. Really amazing... it degrades for all the suckers who are still using IE, but works fine in the modern browsers that support Canvas: Firefox, Opera, and Safari. With Loupe, you can let users call up a little magnifying glass to take a closer look at a small image on your site. Is this cool, or what? The demos are amazing!

DEfusion.org.uk » JavaScript Image Cropper UI, using Prototype & script.aculo.us Amazing! The number and sophistication of widgets and libraries built with Prototype/Scriptaculous have mushroomed since the last time I looked around. Here's one that you can use to enable dynamic image cropping for a website. Gorgeous work... very flexible, and with numerous excellent examples.

gWidgets I do hope this developer continues with these... the four he's released so far all look quite useful and cover a pretty good range of the absolutely necessary list: Tabs, Expandable text, Tool tips, and Popup windows. All done so they can be mixed and matched together in different ways... a lot of good demos here, too.

script.aculo.us Slider Demos and Example Code Damn! I wish these demos had been available when I was building parts of Mars a year ago. But I could find nothing but the demos on the Script.aculo.us wiki site, which didn't cover things like: Scrollwheel activation, use as a scrollbar... the two things I most needed. Oh well... at least they're here now if I need them again!

ModalBox — An easy way to create popups and wizards Here's a very cool javascript library based on Prototype/Scriptaculous: ModalBox is kind of a Lightbox for longer user messages, like "wizards", and could be used for surveys, for example. I love the statement that "it's inspired by Mac OS X modal dialogs"... of course! Nearly all the whiz-bang Ajax visual candy that's come out in the last 2 years is derived from the Mac OS X interface. Definitely want to try this one out some time!

lightWindow Demo I think my title on this puppy says it all. If not, check out the LightWindow demos! As some readers have noticed, I had earlier hacked Lightbox to enable running videos, but this does so much more. And it's more than a hack as well! Thanks, Kevin!

Ajaxian » Performance test results show strong WebKit outcome Ajaxian posted a nice report on a distributed study of the relative browser performance on Dojo's charting system yesterday, and immediately the naysayers started naysaying. "Safari is a piece of crap. WebKit is so buggy..." and the like. I suppose if WebKit keeps coming up at the top of the heap on these kinds of tests, eventually Safari/WebKit will earn more respect, but probably not until a lot of the bozos who are so critical actually buy themselves a Mac. By the way, the test is strictly speaking a measure of relative performance at rendering SVG code, not overall browser speed or javascript parsing. (Although WebKit excels at those, too.)

Handling Keyboard Shortcuts in JavaScript This looks like it might be just the ticket I'm seeking to help smooth out a wrinkle on Mars. Seems many Mac users are accustomed to reading web pages by hitting the spacebar to move to the next page. This handy shortcut scrolls the page exactly one page length based on the browser window's current size. Only problem is, on Mars the persistent header screws up the calculation of the browser window size, apparently. I've been wanting to intercept that shortcut and make sure it works properly on Mars, and maybe this library will help make short work of that!

Button Maker :: Adam Kalsey I went looking for this again since I apparently hadn't bookmarked it before. This is the online tool I used to make the small badges in the Mars footer. I wanted to update one or two and make a new one today, and while I could've futsed with Photoshop for awhile, this is a great little tool that stamps the buttons out just right.

EJSChart :: 100% Pure JavaScript Charting Solution Well, I guess this is the day for cool new graphics libraries for Web 2.0 applications! Unfortunately, EJS Charts isn't free or open source, but it does work great in Safari and WebKit, as well as any other modern browser that supports the Canvas tag. At least, I believe it's using Canvas... the library also works in IE 6, which doesn't support Canvas, so it must use some other mechanism for IE. The chart data can reside in XML format, and the library enables dynamic resizing, zooming, and data selection (among other niceties). The only problem I had with the demo on the site's home page is that I had to reload the page in both Safari and WebKit before the chart rendered correctly. EJS Charts is free for personal use, and is so early in its life that documentation and examples are mostly missing for now. But this looks very promising indeed for any application that needs to display charted data on the web!

Prototype Graphic Framework This is very cool... it's too bad the library doesn't fully support canvas, but I gather that'll bring up the rear. For now, it works great in an SVG-enabled browser (as well as whatever it is that Microsoft uses for IE). For Mac users, this means you can't use Safari until Apple updates it in Leopard. For now, if you want to use Safari, you need to install and run the WebKit nightly build. Note: This is the same developer who gaves us the marvelous windowing library for Prototype, which I've used extensively here on Mars.

Komodo Edit - A Free, feature-rich editor for JavaScript, Perl, PHP, Python, Ruby and Tcl, on Linux, Mac OS X and Windows Originally downloaded April 4, 2007. I think I'd looked at Komodo briefly last year, but didn't download it because it was so expensive. I've also become leery of some cross-platform software, because it's generally designed for Windows in Java and then has an Aqua interface tacked on. Not my idea of good Mac software. But today I realized that Komodo also has a freeware version of its developer IDE, which covers the same range of languages that I'm interested in. As long as it's free, I'm definitely game for a tryout! I'm also impressed by the fact that ActiveState, the company that makes Komodo, has an open beta program for the next point release (4.1) already available as well... for both the editor and the full $300 IDE.

Version as tested: 4.0.

Zimbra on your Desktop Zimbra is doing this to support use of its Collaboration Server, which I think finally became compatible with Safari. (I need to doublecheck that.) Instead of using your browser, though, with Zimbra Desktop, you'd run Zimbra as a separate app, utilizing this new runtime layer. I'm not sure what I think of this new proliferation of such apps... following on Mozilla, Adobe, Microsoft, and so on, what's to be gained if users have to run multiple such runtimes to get their apps going? Isn't this taking us backwards instead of forwards? Just not sure...

Control.Modal : Unobtrusive CSS Modal Windows and Lightboxes for Prototype These are worth taking a closer look at... I do have solutions in place for such things, but I also would like my code to be more in the "nonobtrusive" mold. These are built for the Prototype Javascript library.

Adobe launches Apollo, its web application runtime for the desktop I was too busy last week to report this in a timely manner, but it's potentially big news: Last October, Adobe announced that it would use Apple's open-source WebKit code (on which Safari is based) for a new web application runtime for desktop software, and it's now fulfilled that promise. Apollo can be downloaded in first-release alpha form from Adobe's Labs website, and there's one example application built on the platform that you can also try. Apollo installs as a framework on Mac OS X, and it's also available for Windows. Adobe intends Apollo to be a framework for building web-based applications for the desktop, and I don't know too much more at the moment, but do intend to find out. It sure seems odd to peer into the Apollo framework folder and find the WebCore and JavaScriptCore frameworks, which are the heart of WebKit itself!