Posts

Posted on

I am My Data, My Data is Me

I couldn’t help but get caught up in the recent threads about data lock-in. I have become quite a “data-snob” recently which, I’m finding, is quite abnormal for a developer. Developers are all about the code. On one side you have the Mark Pilgrim & Jon Gruber (& Mark’s reply) discussing Apple’s data lock-in problems. On the other side you have Stewart Butterfield’s not-so-positive comments about allowing Flickr to export to Zooomr or Google’s new online Photo Ablums.

Lots of people are making the connection that these different threads have much in common: People use software to store important data; The data belongs to the people, not the software. This is not about Mac vs. Ubuntu or Flickr vs. Google. It’s about users feeling secure that their data won’t rot away in some application’s proprietary file format.

Is it any wonder that people are more at ease storing photographs in a shoebox than on a computer? It’s easy to take the photos out of the shoebox and move them to a photo album, or to a picture frame. How easy it is to move your photos and metadata to newer software? Or your letters, or your finanical information, or your tax returns?

Things are getting better. Microformats, Atom, and a desire for applications (specifically web applications) to interoperate is raising the bar. Even Microsoft Office finally has a relatively open format with full fidelity. Full fidelity is important or else you’ll lose data when you try to convert to another format. Software developers need to realize that the data will live longer than the software and there should be a simple, easy way to access the data without the software. Until then, your data may not be safe.

Posted on

RichDraw – Simple VML/SVG Editor

Rich text editing is a feature that is finding it’s way into many new web applications. It’s becoming a feature that users can’t live without. We are also starting to see some graphical editing applications. In an effort to satisfy a potential, future, demand to have graphical editing everywhere (it could happen), I created a Javascript component called RichDraw.

RichDraw works in IE 6+, Firefox 1.5+ and Opera 9, using VML or SVG as the underlying renderer. Opera 9 has a small issue with the way I adjust/offset the mouse coordinates, but I’ll look into that. Currently the component supports:

  • Creating basic shapes (rectangle, rounded rectangle and ellipse) and lines.
  • Selecting shapes.
  • Deleting selected shapes.
  • Dragging shapes with mouse.
  • Setting fill color.
  • Setting line color and width.
  • Retrieving the markup.

I don’t know if there are any real uses for RichDraw in it’s current state. There is a lot that could be done to enhance RichDraw and make it more usable. Probably the most important feature would be loading markup back into the editor. On the surface, that’s easy enough to add. However, there could be situations where the markup is saved from IE (VML) and loaded back into Firefox (SVG). This would not work. I am planning on converting the VML to SVG when retrieving and converting it back when loading. That way RichDraw always appears to be using SVG. I will build from my IESVG code to handle the conversions.

Other enhancements include:

  • Resizing selected shapes.
  • Ordering (Bring to Front, Send to Back).
  • Scrollable workarea.
  • Inserting text.
  • Inserting images.

Required files: richdraw.js, svgrenderer.js, vmlrenderer.js

Demo file: richdraw_demo.htm

Posted on

OO Design, Hobgoblins and Foolish Consistency

I started using C++ over 15 years ago. I still use it every day on the job. I have picked up some other OO languages along the way as well. When I learned OO principles, there was a quote I heard often:

When an OO problem looks too difficult, add more objects.

It usually worked, but price was complexity. Simplification by adding complexity. After years of maintaining my own code, as well as other’s, I no longer believe in the philosophy of the quote. My current philosophy fits better with:

When an OO problem looks too difficult, stop using OO.

This works really well, I just had to stop feeling guilty about losing faith in OO. Nowadays I am a mentor to younger developers (for better or worse) and one of my big challenges is getting them to understand why foolish consistency to OO is a problem, not a solution. Over engineering is a real problem (not just with OO). I attribute much of my change to:

  • Using Agile processes that force me to ask “Am I going to need it?”. If I am not going to need it, why am I coding it?
  • Working with dynamic languages to get side projects completed quickly. What if all my projects worked as well as my side projects?
  • Realizing that code is just a means to provide value to a user. The user wants the value, not the code.
  • Discovering that code is suppose to be temporary, it’s the data that lives on. The code you wrote yesterday sucks, and it always will.
  • Understanding that simpler does not mean not as good. It never means complicated, but it can sometimes mean elegant or even robust.

If you think it’s hard to get young developers to understand these ideas imagine how hard it is to get experienced developers to accept them. There are signs all over the place, you just need to look for them.

Posted on

SVG in IE (Update)

I made some changes to the IESVG behavior. I am trying to get better feature coverage without making the rendering too slow. I have been testing the code using some SVG images from different places, trying to figure out what parts of SVG seem to be more important than others. Recents chanegs include:

  • Basic support for gradient fills. It’s pretty weak and may have not SVG-correct.
  • Basic support for svg:g elements.
  • Switched code to use DOM methods (appendChild and replaceChild) instead of slower, string-based methods.

I plan to add more support for gradients. I also plan to add some scripting support. You can do scripting now, but you need to treat the elements as VML, not SVG. I plan to add some methods to the VML elements to make them appear more SVG-like when scripting.

Files can be downloaded from here. I added the SVG lion to the samples:

Sample files: lion.htm (IE), lion.xhtml (Firefox)

Update: Fixed 404 on link above.

Posted on

SVG in IE

Inspired by Emil’s emulation of the canvas tag in IE, I put together a simple SVG emulation behavior for IE. As with Emil’s code, I am making use of Internet Explorer’s VML support. The behavior will walk the SVG element structure and attempt to convert to appropriate VML elements. It’s far from complete, but it does a decent job. Supported features include:

  • Basic shapes: rect, ellipse, circle, polyline, polygon and path.
  • Simple fills commands (in attributes and CSS): fill and fill-opacity.
  • Simple stroke commands (in attributes and CSS): stroke, stroke-width, stroke-opacity and stroke-linejoin.

The behavior works on Inline-SVG, not standalone SVG files. Currently, the behavior only works on static SVG. You can’t use Javascript to interact with the SVG. Javascript can only access the VML elements. I plan to add support for and gradients (although this could be hard). I also want to eventually add support for scripting by adding SVG-like methods to the VML elements. You’ll notice that the SVG elements are in an explicit svg namespace. This seems to be a requirement for the behavior to work, but I am trying to remove the need.

Required files: iesvg.htc, iesvg.js

Sample files: iesvg_test.htm (IE), iesvg_test.xhtml (Firefox)

The sample files are exactly the same, only the extensions are different. Firefox must have Inline-SVG in an XHTML file. There is probably a way I can get Apache to trick Firefox into thinking the HTML file is an XHTML file (or get IE to think the XHTML file is an HTML file), but I haven’t got it working yet.

Update: Core files have been updated. Test files have gradient examples.

Posted on

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.

Posted on

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.

Posted on

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

Posted on

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.

Posted on

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