{"id":4935,"date":"2012-08-26T20:34:50","date_gmt":"2012-08-27T00:34:50","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=4935"},"modified":"2012-08-27T15:00:04","modified_gmt":"2012-08-27T19:00:04","slug":"a-developer-i-admire-walter-zorn","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2012\/08\/26\/a-developer-i-admire-walter-zorn\/","title":{"rendered":"A Developer I Admire &mdash; Walter Zorn"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/08\/walter-zorn.jpg\" alt=\"\" title=\"Walter Zorn\" height=\"451\" class=\"alignleft size-full wp-image-4941\" style=\"margin-top: 4px\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/08\/walter-zorn.jpg 426w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/08\/walter-zorn-287x300.jpg 287w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/> In his recent blog post <a href=\"http:\/\/paulirish.com\/2012\/developers-we-admire\/\">Developers We Admire<\/a>, 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 <strong>web-hacker extraordinaire <a href=\"http:\/\/mathiasbynens.be\/\">Mathias Bynens<\/a><\/strong> (that man can make a web browser do the craziest and most ingenious things), <strong>CSS3-transition and gradient polyfill creator <a href=\"http:\/\/weston.ruter.net\">Weston Ruter<\/a><\/strong> and <strong>web standards evangelist <a href=\"http:\/\/lea.verou.me\/\">Lea Verou<\/a><\/strong> &mdash; 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.  <strong><a href=\"http:\/\/www.walterzorn.de\/en\/index.htm\">Walter Zorn<\/a> was a truly gifted web developer<\/strong> 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.<\/p>\n<p>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.  <strong>When he started publishing his work in 2002,<\/strong> the web was quite a different place: <strong>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.<\/strong>  It was hard to find good cross-browser JavaScript libraries, and decent frameworks like jQuery didn&#8217;t really exist (I had to <a href=\"https:\/\/www.useragentman.com\/shared\/js\/helpers.js\">hack my own<\/a>).  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 <a href=\"http:\/\/en.wikipedia.org\/wiki\/Vml\">VML<\/a>, but it only worked in IE, and <a href=\"http:\/\/en.wikipedia.org\/wiki\/SVG\">SVG<\/a> support at the time was really spotty.  I wanted a true cross-browser solution.<\/p>\n<p><div id=\"attachment_4959\" style=\"width: 474px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4959\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/08\/jsgraphics-screenshot1.png\" alt=\"Examples of objects created with Walter Zorn&#039;s jsgraphics.\" title=\"jsgraphics-screenshot\" width=\"464\" height=\"249\" class=\"size-full wp-image-4959\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/08\/jsgraphics-screenshot1.png 464w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/08\/jsgraphics-screenshot1-300x160.png 300w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><p id=\"caption-attachment-4959\" class=\"wp-caption-text\">Screenshot of objects created with Walter Zorn&#039;s jsgraphics from his website.<\/p><\/div>Then I found <a href=\"http:\/\/www.walterzorn.de\/en\/index.htm\">Walter Zorn&#8217;s website<\/a> and discovered his <a href=\"http:\/\/www.walterzorn.de\/en\/jsgraphics\/jsgraphics_e.htm\">jsgraphics JavaScript library<\/a>. 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 &mdash; 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 &mdash; it worked with Internet Explorer, Opera <em>and<\/em> Netscape 4 (for those who have never had the pleasure &#8230; <strong>coding for Netscape 4 is kind of like drinking too much alcohol: it makes even an ugly thing like Internet Explorer 6 look sexy<\/strong>).  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&#8217;t anti-aliased and it could take a long time if you used it to build some <em>really<\/em> 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.<\/p>\n<p>Zorn also created <a href=\"http:\/\/www.walterzorn.de\/en\/dragdrop\/dragdrop_e.htm\">cross-browser drag and drop<\/a> and <a href=\"http:\/\/www.walterzorn.de\/en\/tooltip\/tooltip_e.htm\">tooltip<\/a> libraries as well, and also experimented with <a href=\"http:\/\/www.walterzorn.de\/en\/rotate_img\/rotate_img.htm\">a cross browser image rotation library<\/a>.  These may not seem like huge accomplishments now (there are so many libraries today that do these tasks), but remember, <strong>this was in 2002<\/strong>, way before CSS3 and HTML5!  The <strong>W3C DOM was not implemented in all browsers<\/strong> (remember <code>document.all<\/code> and <code>document.layers<\/code>?), <strong>CSS implementations were buggy and fragmented<\/strong>, and tools like Element Inspectors and JavaScript debuggers were science-fiction (well .. IE <em>did<\/em> have a debugger, but it was horrible.  <strong>If debuggers were science-fiction movies, IE&#8217;s was <a href=\"http:\/\/en.wikipedia.org\/wiki\/Plan_9_From_Outer_Space\">Plan 9 From Outer Space<\/a><\/strong>).   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 &#8230; <em>&#8220;if I wanted to&#8221; being the key phrase here.<\/em> ;-)<\/p>\n<p>Years later when I was writing my article on <a href=\"https:\/\/www.useragentman.com\/blog\/2010\/01\/10\/cross-browser-html5-drag-and-drop\/\">Cross-Browser HTML5 Drag and Drop<\/a>, I thought of using Zorn&#8217;s drag and drop library to build a decent polyfill for Opera (which at the time didn&#8217;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&#8217;s work.  Apparently I wasn&#8217;t the only one who did so &mdash; <a href=\"https:\/\/sites.google.com\/a\/balancegames.org\/zorn\/\">Zorn&#8217;s friends and family brought walterzorn.de back on-line<\/a> and dedicated it to his memory.<\/p>\n<p>According to one of his friends, Walter was apparently &#8220;mad-keen&#8221; about long-distance cycling and rode all over Europe.  He was especially interested in <a href=\"http:\/\/en.wikipedia.org\/wiki\/Recumbent_bike\">recumbent bikes<\/a> 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 <strong>before 2000, Walter never knew how to use a computer!<\/strong><\/p>\n<p>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&#8217;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&#8217;s front-end technologies.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/08\/walter-zorn-thumb.jpg\" \/> In his recent blog post <a href=\"http:\/\/paulirish.com\/2012\/developers-we-admire\/\">Developers We Admire<\/a>, Paul Irish called out to the web development community to blog about the developers they found important and inspirational.   My contribution to that list is the late <a href=\"http:\/\/www.walterzorn.de\/\">Walter Zorn<\/a> who created a JavaScript library that allowed developers to create simple 2D graphics at a time before canvas and SVG were practical technologies.  He has been one of my role models and has shown me that awesome and seemingly impossible things are possible with a bit of JavaScript, a little creativity and a lot of testing.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4935","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=4935"}],"version-history":[{"count":82,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4935\/revisions"}],"predecessor-version":[{"id":5047,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4935\/revisions\/5047"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=4935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=4935"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=4935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}