Free Saeed Malekpour, Website Developer

Contact Me

@zoltandulac

Most Popular Posts

  • Cross Browser CSS Transforms – even in IE
  • How to Detect Font-Smoothing Using JavaScript
  • Cross Browser HTML5 Drag and Drop
  • @font-face in Depth
  • Installing Cygwin and FontForge for Windows
  • Cross Browser HTML5 Progress Bars In Depth
  • Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Forms
  • Categories

    A Developer I Admire — Walter Zorn

    August 26th, 2012 by zoltan · 9 Comments

    In his recent blog post Developers We Admire, Paul Irish called out to the web development community to blog about the developers they found important and inspirational. People that come to mind for me immediately include web-hacker extraordinaire Mathias Bynens (that man can make a web browser do the craziest and most ingenious things), CSS3-transition and gradient polyfill creator Weston Ruter and web standards evangelist Lea Verou — all of them are, in my opinion, awesome as hell and their work has definitely influenced mine. There is one developer, however, who has changed the path my career has taken and has been my role model for the past thirteen years. Walter Zorn was a truly gifted web developer and an important contributor to the web development community. After he passed away in 2009, his web site expired and his work almost disappeared from the web altogether, which would have been a shame since some of his work foreshadowed what was to be included in HTML5 almost a decade later. His code showed me that awesome and seemingly impossible things are possible with a bit of JavaScript, a little creativity and a lot of testing.

    Before there was HTML5 or CSS3, before there decent mobile browsers with GPU acceleration, and before there was Google Chrome, Safari or even Firefox, there was Walter Zorn. When he started publishing his work in 2002, the web was quite a different place: Internet Explorer won the browser war, the free version of Opera served ads to users and the Mozilla Foundation was just starting to manage the source of what was previously Netscape Navigator. It was hard to find good cross-browser JavaScript libraries, and decent frameworks like jQuery didn’t really exist (I had to hack my own). Back then (as I do now) I loved using JavaScript to create visual UI eye-candy and animations without using a closed system like Flash. The one thing that I could not do, though, was create vector diagrams using JavaScript or HTML. Sure, I could use VML, but it only worked in IE, and SVG support at the time was really spotty. I wanted a true cross-browser solution.

    Examples of objects created with Walter Zorn's jsgraphics.

    Screenshot of objects created with Walter Zorn's jsgraphics from his website.

    Then I found Walter Zorn’s website and discovered his jsgraphics JavaScript library. With it, developers could draw vector graphics without Flash using a bunch of small div blocks as pixels. It worked surprising well, and I no longer had to rely on back-end technologies like PHP or Perl to draw graphs, pie charts or maps on a web page — I even used it to make a complex drag and drop flowcharting web-application. His work was truly cross browser with all the modern browsers of the time — it worked with Internet Explorer, Opera and Netscape 4 (for those who have never had the pleasure … coding for Netscape 4 is kind of like drinking too much alcohol: it makes even an ugly thing like Internet Explorer 6 look sexy). The jsgraphics library even works in all modern browsers today (including, surprisingly, Opera Mini). Sure, jsgraphics is not as sophisticated as HTML5 Canvas (graphics weren’t anti-aliased and it could take a long time if you used it to build some really complicated graphics), but Canvas was not a true viable cross-browser alternative until Opera implemented it in 2006 (the same year Google created the excanvas polyfill for IE). It filled a need at the time and I loved using it.

    Zorn also created cross-browser drag and drop and tooltip libraries as well, and also experimented with a cross browser image rotation library. These may not seem like huge accomplishments now (there are so many libraries today that do these tasks), but remember, this was in 2002, way before CSS3 and HTML5! The W3C DOM was not implemented in all browsers (remember document.all and document.layers?), CSS implementations were buggy and fragmented, and tools like Element Inspectors and JavaScript debuggers were science-fiction (well .. IE did have a debugger, but it was horrible. If debuggers were science-fiction movies, IE’s was Plan 9 From Outer Space). This made these accomplishments even more awesome, and the fact that he open-sourced it all with full documentation at no-charge made a huge impression on me, considering the amount of work he put into it. He was the kind of developer I wanted to be. I studied his code to see how he made this voodoo worked, and learned a hell of a lot about hacking JavaScript in the process. Even today, I could still build a decent animated website in Netscape 4 if I wanted to … “if I wanted to” being the key phrase here. ;-)

    Years later when I was writing my article on Cross-Browser HTML5 Drag and Drop, I thought of using Zorn’s drag and drop library to build a decent polyfill for Opera (which at the time didn’t support it) but his website had disappeared. I did some digging and found out about his untimely passing. I was fortunate to get in touch of a friend of his who was good enough to pass my condolences from me to his family, including a note expressing how much I respected Walter’s work. Apparently I wasn’t the only one who did so — Zorn’s friends and family brought walterzorn.de back on-line and dedicated it to his memory.

    According to one of his friends, Walter was apparently “mad-keen” about long-distance cycling and rode all over Europe. He was especially interested in recumbent bikes that he built and designed himself, and won pretty much all HPV (human powered vehicle) contests available to him in Europe. However, the most interesting thing I found out about Walter was that before 2000, Walter never knew how to use a computer!

    I never knew the man (my only contact with him was a few emails back-and-forth thanking him for his libraries), but his work inspired me and helped shape the kind of developer I am today. I don’t think I would have done any of the research of created any of the libraries that are on this blog without his example, and I wonder sometimes what kind of voodoo he would have been able to cook up with today’s front-end technologies.

    Tags: Uncategorized

    9 responses so far ↓
    • 1 ven // Aug 27, 2012 at 1:53 pm

      Sad to hear of his death. I used Walter’s stuff back in the days and he showed that amazing things that one can do with small functionality, plus he let anyone use the libraries! I would have junior programmers play with his examples and study his code to show them that anything is possible in the browser!

    • 2 brent // Aug 27, 2012 at 5:34 pm

      nice write up. I remember using Walter Zorn’s vector library ages ago for rendering polylines on maps clientside for showing dynamic routes. very creative stuff!

    • 3 matths // Aug 28, 2012 at 2:54 am

      Yes, definitely a developer who is very noteworthy!
      Very well-written article, which also puts me back in that time. Although his vector drawing library using A LOT of divs had not really made animations possible, it was one of those frameworks that made HTML dynamic.
      After DHTML I continued my way through Flash development, but to date I have always observed the javascript way, too. Sometimes one misses the time with all those browser restrictions and workarounds…
      RIP Walter Zorn!

    • 4 Deep // Aug 28, 2012 at 8:00 am

      Indeed a brilliant webdev, I used his libraries in the early days to implement defining imagecrop properties. Sad to hear Walter has passed away..

    • 5 zoltan // Aug 28, 2012 at 9:40 am

      @matths: I was able to do some simple animations with it — but yeah, not as sophisticated as what you can do today with HTML5 Canvas though. It was good enough to create a drag and drop flowcharing application I made back in 2003 – when moving a node in the flowchart, all the lines connecting that node to the others would redraw as the user dragged it around, which looked so cool at the time.

      I don’t miss developing for Netscape 4 though. :-)

    • 6 Ruturaj // Sep 1, 2012 at 2:12 am

      Days back, when there was no github, jQuery, script.aculo.us, dojo, etc. It used to be walterzon’s libs.

      RIP!

    • 7 Richard Fink // Sep 25, 2012 at 5:37 pm

      Zoltan,

      I was a user of Walter Zorn’s libraries for years. Especially drag and drop. Still using it, too. As a special-purpose library it’s hard to beat.

      I was shocked some months ago when I went looking for his site to find that he was gone. And and athlete, he was, too! Very sad. He had a style of writing javascript that was easy for a developer to figure out and use quickly.
      As a scripter I’ll never be fit to shine that guy’s shoes. Thanks for the eulogy Zoltan.

      RIP Walter Zorn, you are and will continue to be missed.

    • 8 Rodrigo Fuentes // Mar 11, 2013 at 1:19 pm

      I used Walter’s drag and drop and tooltip library many times in the past. It was outstanding to be able to implement drag and drop back in 2003-2004 without using flash. Thank you so much Walter for your contribution to the community! My condolences for the family too.
      RIP. We will miss you.

      @zoltandulac Thanks for this excellent tribute to Walter’s.

    • 9 zoltan // Mar 11, 2013 at 9:12 pm

      @Rodrigo: As I mentioned in the article, I often wonder what he would do with today’s web technology. Posting this was the least I could do — I wondered for a long time why he went silent all of a sudden, and I couldn’t stand that think that his contibutions would be forgotten. It was a pleasure to write this post.

    Give Feedback

    Don't be shy! Give feedback and join the discussion.

    Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.

    An orange star denotes a required field.