{"id":589,"date":"2010-01-22T03:26:05","date_gmt":"2010-01-22T03:26:05","guid":{"rendered":"http:\/\/www.codedread.com\/blog\/?p=589"},"modified":"2010-01-22T03:29:46","modified_gmt":"2010-01-22T03:29:46","slug":"svg-edit-the-secret-sauce","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2010\/01\/22\/svg-edit-the-secret-sauce\/","title":{"rendered":"SVG-edit: The Secret Sauce"},"content":{"rendered":"<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/svgedit.svgz\">[clipart]<\/object><a href=\"http:\/\/svg-edit.googlecode.com\/\">SVG-edit<\/a> has far exceeded my expectations in the seven months since I've been working on it.  The people I've met there have been amazing and it's been really fun to watch the project grow both in members and in capabilities.  Without the people working on it, people like <a href=\"http:\/\/a.deveria.com\/\">Alexis<\/a> (now the top contributor) and <a href=\"http:\/\/vertex.corpsmoderne.net\/main.php?g2_itemId=114\">wormsxulla<\/a> (whip-cracker on UI translations) and others, there wouldn't <em>be<\/em> a project - that much is obvious.  But would you like to know the secret sauce in the SVG-edit project?  Of course you would.<!--more--><\/p>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/googlecode.svgz\">[clipart]<\/object>One of the surprising factors in SVG-edit has been using <a href=\"http:\/\/googlecode.com\/\">GoogleCode<\/a> in combination with <a href=\"http:\/\/svnbook.red-bean.com\/\">Subversion<\/a>.  Let me tell you why:<\/p>\n<h3 id=\"linked\">Linked Information<\/h3>\n<p>Everything is an issue in SVG-edit.  This is the way we keep track of things to do.  This is the way other people discover things they can work on.  This is the way we prioritize features for a release.  This is the way we identify <a href=\"http:\/\/code.google.com\/p\/svg-edit\/issues\/list?can=2&q=label%3AGood-First-Bug\">good first bugs<\/a> for new hackers to work on.  This is the way we sort problems into browser-specific, usability, interoperability categories.  This is even where we put requirements and design decisions.<\/p>\n<p>Making almost everything an issue is good because GoogleCode has some magic that detects revision commit messages and message comments and inter-links the two.  For instance, if I fix <a href=\"http:\/\/code.google.com\/p\/svg-edit\/source\/detail?r=1275\">issue 436<\/a>, I might do:<\/p>\n<p><code>$ svn ci -m \"Fix Issue 436: Fixed the foo thing\"<\/code><\/p>\n<p>This shows up in GoogleCode <a href=\"http:\/\/code.google.com\/p\/svg-edit\/source\/detail?r=1275\">here<\/a> and provides you a link to the issue.<\/p>\n<p>Now in the issue itself, I can mark it as Fixed and mention the revision that fixed the issue:<\/p>\n<p><code>Fixed in r1275<\/code><\/p>\n<p>Once again, GoogleCode provides a link to the revision when you <a href=\"http:\/\/code.google.com\/p\/svg-edit\/issues\/detail?id=436#c1\">look at the bug<\/a>.<\/p>\n<p>This kind of tracking takes a little bit of discipline, but it's not that bad and the payoff is worth it.  It really helps other developers keep tabs on what's been solved where and how.<\/p>\n<h3 id=\"host-it\">Host It<\/h3>\n<p>Since SVG-edit is a 100% client-side application (i.e. everything happens in the browser, no server component), and since Subversion allows you to <a href=\"http:\/\/svnbook.red-bean.com\/en\/1.5\/svn.advanced.props.file-portability.html#svn.advanced.props.special.mime-type\">specify MIME types<\/a> by setting properties on files, we can convince GoogleCode to host the entire project in runnable form for the purposes of demo-ing the code.<\/p>\n<p>This applies to the trunk as well as any branches and tags.  For instance, you can actually see the evolution of SVG-edit over time:<\/p>\n<ul>\n<li><a href=\"http:\/\/svg-edit.googlecode.com\/svn\/branches\/1.0\/svg-editor.html\">SVG-edit 1.0<\/a><\/li>\n<li><a href=\"http:\/\/svg-edit.googlecode.com\/svn\/branches\/2.0\/svg-editor.html\">SVG-edit 2.0<\/a><\/li>\n<li><a href=\"http:\/\/svg-edit.googlecode.com\/svn\/branches\/2.1\/editor\/svg-editor.html\">SVG-edit 2.1<\/a><\/li>\n<li><a href=\"http:\/\/svg-edit.googlecode.com\/svn\/branches\/2.2\/editor\/svg-editor.html\">SVG-edit 2.2<\/a><\/li>\n<li><a href=\"http:\/\/svg-edit.googlecode.com\/svn\/branches\/2.3\/editor\/svg-editor.html\">SVG-edit 2.3<\/a><\/li>\n<li><a href=\"http:\/\/svg-edit.googlecode.com\/svn\/branches\/2.4\/editor\/svg-editor.html\">SVG-edit 2.4<\/a><\/li>\n<\/ul>\n<p>Or you can look at the <a href=\"http:\/\/svg-edit.googlecode.com\/svn\/trunk\/editor\/svg-editor.html\">latest trunk build<\/a>.<\/p>\n<p>Or you can host the file in a web page by using <code>&#60;iframe&#62;<\/code> element like <a href=\"https:\/\/www.codedread.com\/blog\/archives\/2009\/06\/19\/embed-an-svg-editor-on-your-web-page\/\">I've talked about before<\/a>.<\/p>\n<p>The fact that GoogleCode servers host the repo and also support web serving the content is immensely powerful:  it means we don't have to administer a source code repository and we don't have to pay for a dedicated server or bandwidth costs to demo the software.  Furthermore, because it's a browser-based app, users don't have to download anything, they can try out the code right on the spot.<\/p>\n<p>Incidentally this is also one of the strengths of a web app in the first place:  Zero downloads.<\/p>\n<h3 id=\"regression\">Tracking Down A Regression<\/h3>\n<p>GoogleCode's hosting of the svn repo doesn't stop at branches\/tags.  In fact, you can look at <strong>ANY<\/strong> revision in the browser directly.  Coupled with the fact that we don't really require a build step means that it is very easy to track down a regression.<\/p>\n<p><a href=\"http:\/\/git-scm.com\/\">git<\/a> has this cool feature called <a href=\"http:\/\/www.kernel.org\/pub\/software\/scm\/git\/docs\/git-bisect.html\">bisect<\/a> that allows you to hunt down when a regression occurred by seeking forward\/backward across revisions in increasingly smaller increments, building each revision and testing until you find the first revision in a branch that exhibited a problem.<\/p>\n<p>We can do this much easier in SVG-edit using Subversion on GoogleCode.  Let's say one day we notice a problem in the trunk and we're at r1200.  Well, we might decide to try out the editor at <a href=\"http:\/\/svg-edit.googlecode.com\/svn-history\/r1000\/trunk\/editor\/svg-editor.html\">revision 1000<\/a> to see if the problem existed then.  If the problem did not exist, we hop ahead 100 revisions to <a href=\"http:\/\/svg-edit.googlecode.com\/svn-history\/r1100\/trunk\/editor\/svg-editor.html\">r1100<\/a> - was the problem present then?  If so, hop back 50 revisions to <a href=\"http:\/\/svg-edit.googlecode.com\/svn-history\/r1050\/trunk\/editor\/svg-editor.html\">r1050<\/a>.  Repeat in the browser until you isolate the earliest revision where the problem occurred, then add a comment to the issue and go <a href=\"http:\/\/code.google.com\/p\/svg-edit\/source\/detail?r=1060\">review that revision<\/a>.<\/p>\n<p>Totally amazing capability and no more difficult than changing a revision number in the browser location bar.  I have to credit <a href=\"http:\/\/narendra.techfandu.org\/\">Narendra Sisodya<\/a>, the project founder, with uncovering that little nugget. <\/p>\n<h3 id=\"non-nirvana\">Not a Nirvana<\/h3>\n<p>There are still some grips\/nits I have with GoogleCode+Subversion:<\/p>\n<ul>\n<li>Being able to serve gzipped JavaScript would be great<\/li>\n<li>Being able to display the current revision number in SVG-edit<\/li>\n<li>The wiki markup needs significant improvements<\/li>\n<\/ul>\n<p>But this is free hosting and project management software, so I can't complain too loudly. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[clipart]SVG-edit has far exceeded my expectations in the seven months since I&#8217;ve been working on it. The people I&#8217;ve met there have been amazing and it&#8217;s been really fun to watch the project grow both in members and in capabilities. Without the people working on it, people like Alexis (now the top contributor) and wormsxulla [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,38,43,25,46,11,28],"tags":[191,170,198,140],"class_list":["post-589","post","type-post","status-publish","format-standard","hentry","category-google","category-javascript","category-ria","category-software","category-svg","category-technology","category-web","tag-google","tag-subversion","tag-svg","tag-svg-edit"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=589"}],"version-history":[{"count":6,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/589\/revisions"}],"predecessor-version":[{"id":595,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/589\/revisions\/595"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}