Fennec – Size Does Matter

Some of the feedback we received from Fennec Alpha 1 (and we have received a lot, thank you!) has been about the download and “on disk” size. Fennec is based on XULRunner, Mozilla’s runtime platform. Therefore, when you install Fennec, you’re installing the XULRunner dependency too. Fennec is ~ 1MB in footprint size, while XULRunner is ~ 25MB.

Yes, Fennec’s overall size is a bit big for a mobile browser. But it is a full blown browser, with all the web support of a desktop browser. It also supports the same add-on system as desktop Mozilla applications, like Firefox, Thunderbird and Songbird.

There’s another benefit of having XULRunner installed on the device: Any other XUL-based application can use the XULRunner runtime, without needing to install anything extra. Applications like Chatzilla, XULMine, XULExplorer and Prism could be installed and launched using the shared XULRunner. Keep in mind, Fennec thinks it “owns” that XULRunner and will update it when it needs too.

So, if you installed Fennec A1 and want to create your own XUL-based apps on a mobile device, you have an up-to-date runtime to build on. Here’s a simple way to get started with XULRunner (on mobile too).

Live Clipboard & Open Laszlo

Two really cool announcements this week: Ray Ozzie’s Live Clipboard concept and Open Laszlo running on DHTML. I see both announcements having long term effects.

Live Clipboard is just so simple and useful, it has to get adopted, standardized and built into any serious web and non-web applications. That’s right, desktop applications and OS shells should also support Live Clipboard. Users will love it. Moving data between web and desktop applications should be as simple as copy/paste.

Applications built using Open Laszlo can now be run using Flash or DHTML runtimes. So those Laszlo guys were serious after all. They have a demo running on both runtimes. Very nice. This goes a long way toward platform and runtime independence. A trend I’d like to see continue. Maybe a XUL based runtime could happen too.

IE7 Changes for MSHTML Embedding

This is post is really for me more than anything else. I have been trying to find some information on what new features IE7 offers for those embedding the WebBrowser control. In the process, I also found some stuff that came out with IE6 during the WinXP SP2 timeframe.

  • DOCHOSTUIFLAG: New flags for navigation and redirect control. Also flags for enabling new “windowless” SELECT elements instead of the old “windowed” versions.
  • INTERNETFEATURELIST: This enumeration of features can out in IE6, mainly for controlling security. IE7 adds a couple new features for controlling more security stuff, tabbed browsing and builtin XMLHttpRequest. Also, it provides a way to turn off the damn navigation sounds without hacking the registry. Used with CoInternetSetFeatureEnabled and related API’s.
  • Tabbed Browsing Developer Summary: Describes the effects on the DOM, shows how applications hosts can enable tabbed browsing shortcuts, and describes new notifications.
  • What’s New in Internet Explorer 7: Summary of the major changes in Internet Explorer 7 of particular interest to the developers.
  • NewWindow3 Event: Showed up in IE6 XPSP2. Gives developers better control over handling new browser windows.
  • Microsoft Feeds API: An API for creating, managing, and accessing Really Simple Syndication (RSS) feeds.
  • Protected Mode API: Develop extensions and add-ons for Internet Explorer that can interact with the file system and registry. Includes methods to control a “Save As” dialog and save content to file.
  • Many URI related API’s: CreateUri and IUri interface just for starters.

I came across most of this stuff by searching the MSDN site looking for “Internet Explorer 7 or later”. I’ll try to update this page as I find out more information.

VML, SVG and Canvas

Take a couple weeks off from blogging and it’s real hard to get back into it. I have been working toward a BETA at my day job, playing around with a web project at home and enjoying the end of year holidays as well.

Anyway, the web project is a web application that makes heavy use of graphics. Started building on IE with VML (Vector Markup Language). I gained experience using VML from my day job. Had no problems putting together a pretty good vector graphic editor, complete with HTML text inside shapes. The editor would be a core component in the web application. Then I started adding in support for Firefox. The plan was to abstract the VML/SVG differences and use as much common code as possible. JavaScript libraries like Prototype made lots of the work easy.

The big pain was the feature differences between VML and SVG. Here are some of the problems:

  • VML was built as an extension to HTML. SVG is a separate specification. It took a little time to figure out how to get SVG inside an HTML document (called Inline SVG) to work correctly. Also, I can mix HTML and VML together easily in any combination. SVG requires the use of <foreignObject> to mix in HTML and Firefox does not enable <foreignObject> by default.
  • Shapes in VML (<rect>, <ellipse>, etc.) support text child elements. When I reposition the shape, the text moves with it. It appears that shapes can’t hold text child elements until SVG 1.2, which supports <flowPara> child elements. For now, changes to the shape must be manually mirrored to the sibling text elements.
  • Text in VML supports wordwrap. SVG does not and I can’t believe it. Again, SVG 1.2 supports <flowPara>, but I am not sure wordwrap is part of <flowPara>. How long will it take SVG 1.2 to get implemented in Firefox, Safari and Opera?
  • VML supports the same level of CSS attributes as HTML. SVG does not support the same level. One attribute I could not use was ‘cursor’.

My biggest problems with SVG are text related. Maybe I just don’t know the right way to do it in SVG. I’m still learning.

And then there’s <canvas>. It has good support in Firefox, Safari and Opera (soon). Along comes Emil Eklund with an implementation of <canvas> in IE and now I have to consider switching to <canvas> as the lowest common denominator. My biggest problem with <canvas> is text (I see a theme here). I am not sure how to handle text with <canvas>.

P2P Toolkits

A while ago, I was looking for a P2P framework library that I could use in a software project. The only real P2P toolkits I found were the Java-based JXTA and the Windows XP (SP1) Peer-to-Peer API from Microsoft. Neither really worked for me. I program in C++ and wanted to support older OSes.

I was too focused on ‘P2P’ in my searches. It finally dawned on me that multiplayer games have to solve the same problems as a P2P client. Googling turned up several interesting toolkits:

After looking at all of them, I decided to start working with DirectPlay. It has the easiest API and hides all of the low level socket stuff from me. The biggest potential problem with DirectPlay is that it appears Microsoft is sunsetting it. I don’t think it’s a issue though. It’s still in DirectX and will be for a while. It just won’t be developed any further. At some point, when Windows XP is the oldest OS I need to support, I’ll switch over to the XP Peer-to Peer API.

Improvements in User Experience

Inductive UI in Office 12

By now anyone interested in software user experience has seen the video or read the articles about Microsoft Office 12 getting a complete UI makeover. For an ongoing explanation of the design rationale, you should also checkout Jensen Harris’ blog. Jensen works on the Office user experience team.

Many people write-off the UI changes as merely a ploy to get customers to upgrade. In a way, I agree. Customers will upgrade because the new interfaces will make using Office easier and allow users to be more productive. Inductive UI’s have been around for a while, but this is the first large-scale use in a major Microsoft product.

For those of you in the back, it’s not just about the menus and toolbars (or ‘Ribbon’ as they are calling it). It’s about why the menus are gone and why the toolbar is separated into contextual sections and chunks. I am glad Microsoft spent the time and money to research how users were interacting with Office. Since Office seems to set a UX precedent, I am hoping we see some of these new conventions trickle down into other applications as well.

Update: Jeff Atwood of Coding Horror has a post about this too.

Windows Vista User Experience Guidelines

Microsoft has also released preliminary Windows Vista UX Guidelines. Although many people are pointing to the download, few are commenting on the information contained within. Chris Pirillo does provide a nice list of nuggets he discovered while scanning the documentation. I’ll point out some of my favorites:

  • Wizard pages: Remove front and back pages. Remove page header. Basically remove all redundant textual information.
  • Help on Dialogs: 1. Make labels and controls easy to comprehend, 2. Add explanatory text sections as needed, 3. Use hyperlinks to jump into Help for specific topics which may be confusing, 4. Do not use vague or general Help buttons (users don’t like vague or general help).
  • Task dialogs: MessageBox API on steriods.

I like this release better than previous ones (Win2K and WinXP) because it seems more focused on UX and contains some rationale as well. It’s not just specs for controls, layout and themes. Some sections, such as Window and Layout sections, are not included yet (it’s preliminary). You also need to wade through some Aero graphics babble (I am not impressed with ‘glass’ for UX).

Jumping In

In a rather accidental manner, I am starting up several new projects. I am really getting into Wiki’s. I installed MediaWiki at work for internal collaboration and knowledge management. I decided to run it on Linux instead of Windows, so I installed Ubuntu. Wow! First time I have ever done anything with a *nix. It’s fantastic. I am considering switching my home machine to Ubuntu as well.

I have made many ASP-based web sites before, but now that I had a Linux server, I thought I’d try something different. I installed Django, mainly because I have always wanted an excuse to learn Python. It was much easier to get going than ASP. I had heard the same thing about Ruby On Rails for a while, but had my doubts. Those doubts are gone.

My biggest problem now is finding the time to explore them all.

Hello XUL Runner

I have been playing with XUL Runner. It feels like writing a web app, but runs on the desktop. Windows, Linux and Mac desktops. Sweet!

Other things I like:

  • Nice selection of widgets and layouts
  • XBL allows new widgets and behavior to be added.
  • XPCOM allows calls to JavaScript and C++ non-GUI code.
  • SVG support is builtin. (soon)

AJAX and Rocket Science

Seems I am not the only one disturbed by the FUD some groups are pushing about AJAX being very difficult to implement. This post has some good examples of how easy it can be.

Writing good, quality software is non-trivial in any language. Wizards and RAD designers do not automagically generate great software.

Scalable User Experience

John Montgomery on Scalable User Experience. Although I disagree with the rocket scientist required myth, I agree with John’s conclusions. I especially like this quote:

Rather than trying to replace every application model in use today with one perfect model, a better solution is to let them flourish and to connect them together so that each can do what it does best. This vision, which I’d call the “Scalable User Experience,” is where Atlas begins to take application models. This team is building off three tenets (even if they don’t know it):

  • Respect the richness of the client (whatever that is) to provide the best possible user experience
  • Contain complexity on the server to build on existing administration skills and infrastructure
  • Leave no developer behind by using existing developer skills, code, and tools

I believe that AJAX is a methodology which can help achieve scalable user experiences. I am hoping toolkits like ATLAS can help with some of the weaker aspects of web applications, mainly integration with the desktop client.