<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.3.2" -->
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>

<channel>
	<title>BernieCode</title>
	<link>http://www.berniecode.com/blog</link>
	<description>Fun with web development and photography</description>
	<pubDate>Wed, 18 Jun 2008 13:06:27 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.3.2</generator>
	<language>en</language>
			<item>
		<title>SoFoBoMo: A macrophotographic odyssey</title>
		<link>http://www.berniecode.com/blog/2008/04/30/sofobomo-a-macrophotographic-odyssey/</link>
		<comments>http://www.berniecode.com/blog/2008/04/30/sofobomo-a-macrophotographic-odyssey/#comments</comments>
		<pubDate>Wed, 30 Apr 2008 16:12:10 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[photography]]></category>

		<category><![CDATA[sofobomo]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2008/04/30/sofobomo-a-macrophotographic-odyssey/</guid>
		<description><![CDATA[I&#8217;ve just finished my project for SoFoBoMo, and put live the new sofobomo.org site. SoFoBoMo, for those of you who don&#8217;t know, is the Solo Photo Book Month: a loosely organised international group of photographers who all decided to stop procrastinating and make a real, physical book. In one month.
View the pictures here (for free)

Buy [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve just finished my project for SoFoBoMo, and put live the new <a href="http://www.sofobomo.org/">sofobomo.org</a> site. SoFoBoMo, for those of you who don&#8217;t know, is the Solo Photo Book Month: a loosely organised international group of photographers who all decided to stop procrastinating and make a real, physical book. In one month.</p>
<p><a href="http://flickr.com/photos/bernieandjude/sets/72157604813661101/show/">View the pictures here</a> (for free)<a href="http://flickr.com/photos/bernieandjude/sets/72157604813661101/show/"><br />
</a></p>
<p><a href="http://www.blurb.com/bookstore/detail/231492">Buy the book here</a> (for just the cost of printing)</p>
<p>Since this blog is supposed to be about technique, not just pimping my projects, I thought I&#8217;d share with you the process I used to make 41 portraits in 2 weeks.</p>
<p>Each of the 41 portraits is a macro shot of an eye, with a classical head and shoulders portrait of a the eye&#8217;s owner behind the pupil.</p>
<p><strong>The project</strong></p>
<p>When I look at a portrait I first see the expression on the subject’s face, and after a few moments of appreciation I find my gaze inevitably drawn to the eyes. The eyes reveal the personality of the subject, confirming the expression of the face or contradicting it. The eyes are the most important part of the portrait, yet the smallest. This is a pity because eyes contain beautiful details that are lost in most portraits.</p>
<p>This project consists of inside-out portraits. The intention is that after the first few moments regarding the eye, your gaze is inevitably drawn inwards to the subject’s face:</p>
<p><a href="http://www.flickr.com/photos/bernieandjude/2453874089/" title="Jimmi by Bernie Sumption, on Flickr"><img src="http://farm4.static.flickr.com/3241/2453874089_62509ae00f.jpg" alt="Jimmi" border="0" height="400" width="500" /></a></p>
<p>Yup, that&#8217;s natural colour. The colour and texture comes from using a strong flash from the side to illuminate the iris, removing all the reflections you&#8217;d see if you took the photo in a well lit room. Click through to the flickr page and have a look at the large size.</p>
<p>This is how the photos were taken:</p>
<p><strong>The Macro shot</strong></p>
<p>As a macro shot, the depth of field was very shallow. Normally I advise people not to close the aperture more than f/11 to prevent softness due to diffraction. I tried f/11 at first, but found that the focus errors this caused were a far worse problem than a bit of diffraction so I stopped down to f/22 to increase the depth of field. As always for macro photography, a still subject is important so I had my subjects lean into a chair back and rest their chin on their hands. My lens was a standard 70-300 zoom with a Canon 500D close-up attachment on the front which reduces the lens focussing distance allowing you to get close for a high magnification.</p>
<p>The eye is side-lit by a single flash. Normally this would produce a harsh light unsuitable for a portrait. However, for the macro shot this was exactly what I wanted. The light reveals all the texture in the skin and iris.</p>
<p><a href="http://www.flickr.com/photos/bernieandjude/2411844202/" title="Eyes technique 2: macro by Bernie Sumption, on Flickr"><img src="http://farm3.static.flickr.com/2149/2411844202_7bb1808790.jpg" alt="Eyes technique 2: macro" border="0" height="375" width="500" /></a></p>
<p>The main lesson I learned from the macro shot was that I got far better results by shooting a bit too much of each eye then cropping down. I left myself more room for error, increased the depth of field, and used my lens at 200mm where it is sharper than at 300mm.</p>
<p>Manually focussing with an f/5.6 lens in dim indoor lighting is hard, so I placed a bare lightbulb behind me and twisted the focus ring until the reflection of the bulb in the eye was a single pinprick of light. This would work for any shiny surface. Using a shutter speed of 1/250 and an f/22 aperture a bright flash is required, meaning that all illumination in the photo comes from the flash and the focussing bulb is not visible in the photo.</p>
<p><strong>The portrait</strong></p>
<p>The portraits were harder than the macro shot because I&#8217;m not a portrait photographer. With a bit of practice however, and a lot of wine, I found myself reassuring subjects and coaxing some good poses out of them.</p>
<p>The Flash was bounced into a silver umbrella which creates a soft light on the subject&#8217;s face that is much more flattering than a direct flash. The black curtain in the background means that you can&#8217;t see the join between the portrait and the black pupil in the macro shot when they are combined.</p>
<p><a href="http://www.flickr.com/photos/bernieandjude/2411844452/" title="Eyes technique 1: wide angle by Bernie Sumption, on Flickr"><img src="http://farm3.static.flickr.com/2284/2411844452_163cdd272e.jpg" alt="Eyes technique 1: wide angle" border="0" height="375" width="500" /></a></p>
<p>The main lesson I learned is that taking portraits takes practice. You&#8217;ll never get a good shot of someone who is nervous, and you can stop people from being nervous by being confident (and by serving wine). Before I started I didn&#8217;t feel comfortable taking photos of people. After 41 portraits I feel like I can get good shots of most (say 75%) of the people I meet.</p>
<p><strong>Editing and post-production</strong></p>
<p>Apart from the obvious changes of superimposing the portrait and and converting everything but the iris to black and white, the only processing I did was sharpening. The skin was treated to a Photoshop unsharp mask at strength 200% and radius 2px. This is a strong effect that looks too much on screen, but will be perfect for the printed work since printing softens the photo slightly. The inner portrait was sharpened with a radius of 1 pixel since 2px messed up the fine detail too much. Finally, the iris got a strength of 40% and a radius of 30px. This effect is completely different to standard sharpening, and has the effect of enhancing the patterns in the iris.</p>
<p>In this photo, the rightmost section has no treatment, the middle section has the 2 pixel sharpen, and the left section has the 30 pixel sharpen on top of the 2 pixel one:</p>
<p><img src="http://www.berniecode.com/blog/wp-content/uploads/2008/04/sharpen.jpg" alt="The effect of sharpening" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2008/04/30/sofobomo-a-macrophotographic-odyssey/feed/</wfw:commentRss>
		</item>
		<item>
		<title>A Geek&#8217;s Guide to Depth of Field</title>
		<link>http://www.berniecode.com/blog/2008/02/04/a-geeks-guide-to-depth-of-field/</link>
		<comments>http://www.berniecode.com/blog/2008/02/04/a-geeks-guide-to-depth-of-field/#comments</comments>
		<pubDate>Mon, 04 Feb 2008 21:00:16 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[photography]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2008/02/04/a-geeks-guide-to-depth-of-field/</guid>
		<description><![CDATA[The other month I wrote a beginner’s guide to photographic technique for geeks, and judging by the number of hits and comments I received it went down well. One explanation is that there is a real market for articles on photographic technique that are written in plain English but don&#8217;t pull their punches when it [...]]]></description>
			<content:encoded><![CDATA[<p>The other month I wrote a <a href="http://www.berniecode.com/writing/photography/beginners/">beginner’s guide to photographic technique for geeks</a>, and judging by the number of hits and comments I received it went down well. One explanation is that there is a real market for articles on photographic technique that are written in plain English but don&#8217;t pull their punches when it comes to the technical details: articles for geeks. Another explanation is that the readers of digg.com/design wanted to skive off on a Friday afternoon, and at a first glance my white background pages are indistinguishable from real work. Being an optimist I shall assume the former, and crack on:</p>
<p><strong><a href="http://www.berniecode.com/writing/photography/depth-of-field/">Bernie&#8217;s Better Guide to Depth of Field for Geeks Who Want to be Digital Artists</a></strong></p>
<p>By the way, if you&#8217;re not sure what an f/1.8 aperture, 85mm focal length, or 1.6x crop factor camera body are, I suggest you have a look at <a href="http://www.berniecode.com/writing/photography/beginners/">last month&#8217;s beginner&#8217;s guide</a>.</p>
<p><strong>P.S.: SoPhoBoMo</strong></p>
<p>Paul Butzi over at the Photo Musings blog has an idea that&#8217;s just perfect for beginner and advanced photographers alike to improve their skills. The goal of <a href="http://photomusings.wordpress.com/2008/01/18/solo-photo-book-month/">Solo Photo Book Month</a> is to produce a professional PDF photo book with 35 images over the month of April. Afterwards you can post it online, keep it to yourself and feel smug, or even send it to a print-on-demand site like blurb.com and start selling it.</p>
<p>It has been <a href="http://www.luminous-landscape.com/columns/personal-style.shtml">eloquently argued</a> that the most important development for the artist is arriving at a personal style. Technique - the stuff of my articles - is important because a lack of technical skill can prevent you from being able to express your personal vision. However if you don&#8217;t know what your personal vision is, you&#8217;ll never take photos that <em>you</em> consider to be art.</p>
<p>SoPhoBoMo is great because it may well help you define your personal style; that&#8217;s certainly what I&#8217;m hoping. I haven&#8217;t decided what my project is going to be, but I imagine my new-found love of macro photography will feature pretty heavily. 35 photos may seem a lot for one month, so pick a project that you can do along with your daily routine.</p>
<p>If you decide to go ahead, <a href="http://photomusings.wordpress.com/2008/01/18/solo-photo-book-month/">pledge your entry here</a>. If I haven&#8217;t sold you on it, <a href="http://gordonmcgregor.blogspot.com/2008/01/sofobomo.html">read this</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2008/02/04/a-geeks-guide-to-depth-of-field/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Proper private constructors for ActionScript 3.0</title>
		<link>http://www.berniecode.com/blog/2007/11/28/proper-private-constructors-for-actionscript-30/</link>
		<comments>http://www.berniecode.com/blog/2007/11/28/proper-private-constructors-for-actionscript-30/#comments</comments>
		<pubDate>Wed, 28 Nov 2007 16:02:17 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[Client-side web programming]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2007/11/28/proper-private-constructors-for-actionscript-30/</guid>
		<description><![CDATA[(*note to photography subscribers: this is a photography and programming blog, if you only want to read articles on photography, subscribe to the photography-only feed)
While I prepare the next big article, here&#8217;s a useful tip for Flash and Flex programmers. ActionScript 3.0 is great, but has no Singletons.
Samuel Agesilas has a solution that successfully prevents [...]]]></description>
			<content:encoded><![CDATA[<p>(*note to photography subscribers: this is a photography <i>and</i> programming blog, if you only want to read articles on photography, subscribe to <a href-"http://www.berniecode.com/blog/category/photography/feed/">the photography-only feed</a>)</p>
<p>While I prepare the next big article, here&#8217;s a useful tip for Flash and Flex programmers. ActionScript 3.0 is great, but has no <a href="http://en.wikipedia.org/wiki/Singleton_pattern">Singletons</a>.</p>
<p>Samuel Agesilas <a href="http://www.levelofindustry.com/journal/2007/6/3/private-constructors-in-actionscript-3.html">has a solution</a> that successfully prevents subclasses from calling the constructor using <code>super()</code>, but it doesn&#8217;t prevent other code from creating new instances of a class with <code>new</code></p>
<p>Therefore I present to you a crafty hack to make a constructor truly private: add a required argument to the constructor, which must be set to a secret value that is only known to the class:</p>
<pre highlight="javascript">class Singleton {
    private static var _instance:Singleton = null;

    // secret known only to this class
    private static const secret:Number = Math.random();

    /**
     * @private
     */
    public function Singleton(enforcer:Number) {
        if (enforcer != secret) {
            throw new Error("This class can't be instantiated directly");
        }
    }

    /**
     * Global single instance
     */
    public static function get instance():Singleton {
        if (_instance == null) {
            _instance = new Singleton(secret);
        }
        return _instance;
    }
}</pre>
<p>This method also has the advantage that it is very fast, and offers a level of compiler protection: <code>new Singleton()</code> will fail at compile time. A user could make the compilation work by passing in, for example <code>new Singleton(42)</code>, but there is a very high* chance of that failing at runtime.</p>
<p>Use this technique whenever a constructor should only be called from within a class, to save your users from the all too easy mistake of of creating a second instance of a singleton.</p>
<p>* Geeky aside: the change of guessing the result of Math.random() is 1 to 2^52 against, or 1/4,503,599,627,370,496. This is because 64 bit <a href="http://en.wikipedia.org/wiki/Floating_point">floating point numbers</a> have a 52 bit mantissa.</p>
<p>Update: Grant Skinner has <a href="http://www.gskinner.com/blog/archives/2006/07/as3_singletons.html">another way</a> of doing the same thing. His is probably more elegant, but less amusing, and amusingness is a trait I value in language hacks. Also, his solution is not checked at compile time. Andrew Trice <a href="http://www.cynergysystems.com/blogs/page/andrewtrice?entry=singleton_in_as3">had a go too</a>. His version requires an extra argument so provides compile time checking, but can be defeated by calling <code>new Singleton(Singleton.getInstance)</code>. Thanks for the links shaun.</p>
<p>Update 2: Ho hum, Eric J Feminella has <a href="http://www.ericfeminella.com/blog/as3-model-view-controller-implementation/">a solution</a> that is better than mine, since it is properly checked at compile time, i.e. you can&#8217;t fool it by passing in any int, and falling back on runtime checking (though null would work). I still contend that my solution is more amusing though :o)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2007/11/28/proper-private-constructors-for-actionscript-30/feed/</wfw:commentRss>
		</item>
		<item>
		<title>A Computer Geek&#8217;s Guide to Advanced Photographic Technique</title>
		<link>http://www.berniecode.com/blog/2007/10/17/a-computer-geeks-guide-to-advanced-photographic-technique/</link>
		<comments>http://www.berniecode.com/blog/2007/10/17/a-computer-geeks-guide-to-advanced-photographic-technique/#comments</comments>
		<pubDate>Wed, 17 Oct 2007 21:23:14 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[photography]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2007/10/17/a-computer-geeks-guide-to-advanced-photographic-technique/</guid>
		<description><![CDATA[Over the past few months I have been learning photography. It&#8217;s fun.
After much head-scratching I have dragged myself through the beginner phase of the initially bewildering world of photography, and can now present to you Bernie&#8217;s Better Beginner&#8217;s Guide to Photography for Computer Geeks Who Want to be Digital Artists: the guide that I wish [...]]]></description>
			<content:encoded><![CDATA[<p>Over the past few months I have been learning photography. It&#8217;s fun.</p>
<p>After much head-scratching I have dragged myself through the beginner phase of the initially bewildering world of photography, and can now present to you <a href="http://www.berniecode.com/writing/photography/beginners/">Bernie&#8217;s Better Beginner&#8217;s Guide to Photography for Computer Geeks Who Want to be Digital Artists</a>: the guide that I wish someone had written for me 4 months ago.</p>
<p>As of now, this is a blog about web development <em>and</em> photography. If you only want one, try these feeds for <a href="http://www.berniecode.com/blog/category/webclients/feed/">web development only</a> or for <a href="http://www.berniecode.com/blog/category/photography/feed/">photography only</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2007/10/17/a-computer-geeks-guide-to-advanced-photographic-technique/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Inheritance is evil and must be destroyed</title>
		<link>http://www.berniecode.com/blog/2007/09/29/inheritance-is-evil-and-must-be-destroyed/</link>
		<comments>http://www.berniecode.com/blog/2007/09/29/inheritance-is-evil-and-must-be-destroyed/#comments</comments>
		<pubDate>Sat, 29 Sep 2007 18:36:35 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[Client-side web programming]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2007/09/29/inheritance-is-evil-and-must-be-destroyed/</guid>
		<description><![CDATA[Sorry about the long delay between articles, I was busy getting married. A big thank you to the people who asked if I was going to write any more: I&#8217;m back in the game now.
When I built Animator.js, I got some flack for suggesting that inheritance is not a Good Thing. Keen to avoid a [...]]]></description>
			<content:encoded><![CDATA[<p>Sorry about the long delay between articles, I was busy getting married. A big thank you to the people who asked if I was going to write any more: I&#8217;m back in the game now.</p>
<p>When I built <a href="http://berniecode.com/writing/animator.html">Animator.js</a>, I got some flack for suggesting that inheritance is not a Good Thing. Keen to avoid a holy war I restated my position to &#8216;inheritance is often useful, but more often overused.&#8217; Over the last few months I&#8217;ve been trying to figure out exactly when it should be used, and have concluded - at least for the kind of systems GUI developers build - never. There are better techniques that accomplish the same thing.</p>
<p>In this article I justify my dislike of inheritance as a prelude to my next article introducing an open source animation toolkit that is built without inheritance.</p>
<p><a title="Inheritance is evil and must be destroyed" href="http://www.berniecode.com/writing/inheritance/">Read the article here</a>.</p>
<p>Edit: Eric Herman wrote in with a link to a <a href="http://tiedyedfreaks.org/eric/CompositionVsInheritance.html">good article he wrote</a> giving a more detailed example of the same problem from a Java point of view.</p>
<p>Edit 2: OK, I couldn&#8217;t make this stuff up. This is a verbatim quote from the Java API documentation for the Properties class that reads configuration from a file:</p>
<blockquote><p>Because <code>Properties</code> inherits from <code>Hashtable</code>, the  <code>put</code> and <code>putAll</code> methods can be applied to a  <code>Properties</code> object.  Their use is strongly discouraged as they  allow the caller to insert entries whose keys or values are not  <code>Strings</code>.  The <code>setProperty</code> method should be used  instead.  If the <code>store</code> or <code>save</code> method is called  on a &#8220;compromised&#8221; <code>Properties</code> object that contains a  non-<code>String</code> key or value, the call will fail.</p></blockquote>
<p>This is what inheritance does to your system! In all fairness, the Java API team introduced the generic collections API to get around this kind of problem, but it&#8217;s still funny.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2007/09/29/inheritance-is-evil-and-must-be-destroyed/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Code generation in JavaScript</title>
		<link>http://www.berniecode.com/blog/2007/03/29/code-generation-in-javascript/</link>
		<comments>http://www.berniecode.com/blog/2007/03/29/code-generation-in-javascript/#comments</comments>
		<pubDate>Thu, 29 Mar 2007 13:25:31 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[Client-side web programming]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2007/03/29/code-generation-in-javascript/</guid>
		<description><![CDATA[If ever a feature of JavaScript was considered harmful, it&#8217;s eval(). It&#8217;s so commonly abused that if I&#8217;m interviewing a JS web developer, I usually ask something along the lines of &#8220;what is eval(), and why shouldn&#8217;t you use it&#8221;. It&#8217;s so commonly abused that Yahoo JavaScript architect Douglas Cronkford considers it &#8220;evil&#8221;, and his [...]]]></description>
			<content:encoded><![CDATA[<p>If ever a feature of JavaScript was considered harmful, it&#8217;s <code>eval()</code>. It&#8217;s so commonly abused that if I&#8217;m interviewing a JS web developer, I usually ask something along the lines of &#8220;what is <code>eval()</code>, and why shouldn&#8217;t you use it&#8221;. It&#8217;s so commonly abused that Yahoo JavaScript architect Douglas Cronkford considers it &#8220;evil&#8221;, and his JavaScript style checker <a href="http://www.jslint.com/lint.html">JSLint</a> reports use of it as an error.</p>
<p>Specifically, he says:</p>
<blockquote><p>The <code>eval</code> function (and its relatives, <code>Function</code>, <code>setTimeout</code>,   and <code>setInterval</code>) provide access to the JavaScript compiler. This is   sometimes useful for parsing <a href="http://www.json.org/">JSON</a> text, but   in virtually all other cases it indicates the presences of extremely bad coding.   The <code>eval</code> function is the most misused feature of JavaScript.</p></blockquote>
<p>Well I&#8217;m tired of my favourite function being badmouthed just because some people can&#8217;t program properly. <a href="http://www.berniecode.com/writing/eval.html">In this article I show how to use eval to generate optimised code based on information only available at run time</a>. The resulting code is 5 times faster than the non-generated version.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2007/03/29/code-generation-in-javascript/feed/</wfw:commentRss>
		</item>
		<item>
		<title>How to debug JavaScript with Visual Web Developer Express</title>
		<link>http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/</link>
		<comments>http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/#comments</comments>
		<pubDate>Thu, 08 Mar 2007 11:01:22 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[Client-side web programming]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/</guid>
		<description><![CDATA[I&#8217;m preparing another (hopefully) useful full length article, but in the mean time I want to share with you a trick for getting a world-class debugger for free in IE.
Some background: users of Visual Studio have long known that it comes with an awesome debugger, probably the best JavaScript debugger there is (though Firebug is [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m preparing another (hopefully) useful full length article, but in the mean time I want to share with you a trick for getting a world-class debugger for free in IE.</p>
<p><a href="http://www.berniecode.com/blog/wp-content/uploads/2007/03/visual-studio-javascript-debugging.png" target="_blank" title="JavaScript debugging in Visual Web Developer Express" class="imagelink"><img src="http://www.berniecode.com/blog/wp-content/uploads/2007/03/visual-studio-javascript-debugging.thumbnail.png" alt="JavaScript debugging in Visual Web Developer Express" style="margin: 5px 10px 5px 0px" title="JavaScript debugging in Visual Web Developer Express" id="image9" align="left" /></a>Some background: users of Visual Studio have long known that it comes with an awesome debugger, probably the best JavaScript debugger there is (though <a href="http://www.getfirebug.com/">Firebug</a> is catching up fast). Whenever you get a JavaScript error, Visual Studio can connect to the Internet Explorer process and start debugging. You can pause the execution of the code, rewind and fast-forward execution, modify data held in variables and get notified when specific variables change in value. Once you&#8217;re used to it, coding without a debugger makes you feel like a blind man in a dark room looking for a black cat that isn&#8217;t there*.</p>
<p>The only problem is that it costs upwards of £500. Microsoft have released an excellent free edition of Visual Studio for web development called <a href="http://msdn.microsoft.com/vstudio/express/vwd/">Visual Web Developer</a>, but among the features reserved for the professional edition is the ability to connect to a process. Hence when you get a JavaScript error in a web page, VWD won&#8217;t appear in the list of possible debuggers.</p>
<p>The work-around is to get VWD to launch IE for you, so that it owns the process and doesn&#8217;t have to explicitly connect to it:</p>
<table style="border-collapse: collapse" border="1" cellpadding="5">
<tr>
<td style="font-size: 20pt">1</td>
<td><a href="http://www.berniecode.com/blog/wp-content/uploads/2007/03/internet-explorer-options.png" target="_blank" title="Internet Explorer Options"><img src="http://www.berniecode.com/blog/wp-content/uploads/2007/03/internet-explorer-options.thumbnail.png" alt="Internet Explorer Options" id="image10" height="96" /></a></td>
<td>First enable debugging in IE: go to Tools &gt; Internet Options &gt; Advanced, and make sure &#8220;Disable Script Debugging (Internet Explorer)&#8221; is <u>unchecked</u> and &#8220;Display a notification about every script error&#8221; is <u>checked</u>.</td>
</tr>
<tr>
<td style="font-size: 20pt">2</td>
<td>&nbsp;</td>
<td>Then <a href="http://msdn.microsoft.com/vstudio/express/vwd/">Download</a> and install VWD</td>
</tr>
<tr>
<td style="font-size: 20pt">3</td>
<td><a href="http://www.berniecode.com/blog/wp-content/uploads/2007/03/new-empty-website.png" target="_blank" title="Adding a new empty website in Visual Web Developer"><img src="http://www.berniecode.com/blog/wp-content/uploads/2007/03/new-empty-website.thumbnail.png" alt="Adding a new empty website in Visual Web Developer" id="image12" height="96" /></a><a href="http://www.berniecode.com/blog/wp-content/uploads/2007/03/new-empty-website.png" title="Creating a new empty website in Visual Web Developer" class="imagelink"></a></td>
<td>Create a new empty website</td>
</tr>
<tr>
<td style="font-size: 20pt">4</td>
<td><a href="http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/start-debugging/" rel="attachment" title="Start Debugging" id="p13" class="imagelink"><img src="http://www.berniecode.com/blog/wp-content/uploads/2007/03/start-debugging.png" alt="Start Debugging" id="image13" height="58" /></a></td>
<td>
<p>Click the &#8220;Start Debugging&#8221; button. You will be prompted to enable debugging for this website - do so. VWD will then launch IE in debugging mode.Since your website is empty you will see a 404; ignore it and navigate to the actual page or website you want to debug.
<p>A tip from Fraser in the comments below: If you like, you can create a home page for the new site, and add this code to the head section:  &lt;meta http-equiv=”refresh” content=”0;url=http://yoursite.com”&gt;. This will redirect you automatically to your chosen site.</p>
</td>
</tr>
<tr>
<td style="font-size: 20pt">5</td>
<td><a href="http://www.berniecode.com/blog/wp-content/uploads/2007/03/visual-studio-javascript-debugging.png" target="_blank" title="JavaScript debugging in Visual Web Developer Express"><img src="http://www.berniecode.com/blog/wp-content/uploads/2007/03/visual-studio-javascript-debugging.thumbnail.png" alt="JavaScript debugging in Visual Web Developer Express" id="image9" height="88" /></a></td>
<td>Any script errors will cause IE to pause execution and transfer control to VWD.The screenshot to the left shows me changing the value of a variable as the script is paused.</td>
</tr>
</table>
<p>If any Firefox users have probelms getting VWD to launch IE, see James Wiltshire&#8217;s comment below.<br />
A few debugging tips:</p>
<ul>
<li>Learn these shortcuts: Step Over (F10) executes the current line of code and moves to the next one. If the current line of code contains a function call, Step Into (F11) moves the debugger into that function call. Step Out (Shift+F11) executes the rest of the current function and pauses again after it returns. Continue (F5) resumes the script until the next error or breakpoint.</li>
<li>Debugging is easier if you write code with one function call per line, so that the debugger knows which function you want to step in to.</li>
<li>You can type any expression in the Watch window, and when its value changes it will turn red.</li>
<li>If you want to open the debugger when there is no error, click in the left-hand margin to set a break point or place the &#8216;debugger&#8217; keyword in your code (this works in Firebug too).</li>
<li>The Script Explorer window is an extremely useful list of open JavaScript and HTML files that you can use to find code in order to set a breakpoint. It is not shown by default but you can enable it in Debug &gt; Windows &gt; Script Explorer.</li>
</ul>
<p>Happy coding!</p>
<p>* joke stolen from Rowan Atkinson</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/feed/</wfw:commentRss>
		</item>
		<item>
		<title>A new Animator.js is released!</title>
		<link>http://www.berniecode.com/blog/2006/12/10/a-new-animatorjs-is-released/</link>
		<comments>http://www.berniecode.com/blog/2006/12/10/a-new-animatorjs-is-released/#comments</comments>
		<pubDate>Sun, 10 Dec 2006 20:05:23 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[Client-side web programming]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2006/12/10/a-new-animatorjs-is-released/</guid>
		<description><![CDATA[I&#8217;ve released an update to Animator.js.
Highlights are:

You can now specify the start and end states of an animation using CSS class names: no more style information in your JavaScript code! IMHO this makes it twice as useful as the last version.
AnimatorChain class makes it easy to chain several animations together (thanks Lachlan Donald and Colin [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve released an update to <a title="Bernie's Better Animation Class" href="http://berniecode.com/writing/animator.html">Animator.js</a>.</p>
<p>Highlights are:</p>
<ul>
<li>You can now specify the start and end states of an animation using CSS class names: no more style information in your JavaScript code! IMHO this makes it twice as useful as the last version.</li>
<li><code>AnimatorChain</code> class makes it easy to chain several animations together (thanks Lachlan Donald and Colin Snover for the idea)</li>
<li>No more dependency on Prototype.js, so users of other toolkits can use it freely.</li>
<li>Useful new transitions: elastic, bouncy and <a href="http://en.wikipedia.org/wiki/ADSR_envelope">Attack Decay Sustain Release</a>.</li>
<li>Bug fixes - styles can now have negative or fractional values</li>
</ul>
<p>Thanks to all the people who wrote to me with suggestions and example of work you&#8217;ve done with Animator, keep them coming!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2006/12/10/a-new-animatorjs-is-released/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Moving Animator.js forwards</title>
		<link>http://www.berniecode.com/blog/2006/11/05/moving-animatorjs-forwards/</link>
		<comments>http://www.berniecode.com/blog/2006/11/05/moving-animatorjs-forwards/#comments</comments>
		<pubDate>Sun, 05 Nov 2006 11:59:49 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[Client-side web programming]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/2006/11/05/moving-animatorjs-forwards/</guid>
		<description><![CDATA[I'll be releasing a new version of Animator.js in a couple of weeks - feedback welcome.]]></description>
			<content:encoded><![CDATA[<p>I was pleasantly surprised by all the good feedback I got for <a href="http://berniecode.com/writing/animator.html">Animator.js</a> since Ajaxian <a href="http://ajaxian.com/archives/animatorjs-animations-using-css">linked to the article</a>.</p>
<p>The most requested feature was &#8220;Can I port it to MochiKit/jQuery/Dojo/mootools&#8221;. Which got me thinking – Animator.js is built on Prototype because I didn&#8217;t want to rewrite code for function delegation and element manipulation myself, but it doesn’t use any of Prototype&#8217;s advanced functionality. I could remove the dependency on prototype quite easily and then it would work with any toolkit. I estimate this would add about 1K to the file size.</p>
<p>Having a class that can be used in any toolkit would be much better than a number of independently maintained forks.</p>
<p>Two questions:</p>
<ol>
<li>What changes should I make to ensure that it can plug in to your favourite toolkit?</li>
<li>If someone can make a product usable for more people by re-implementing basic functionality again, is it worth it? Or is the world standardising on Prototype to do all that for them?</li>
</ol>
<p>I’ll be making another release in a couple of weeks so let me know your thoughts, and any other feature requests.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2006/11/05/moving-animatorjs-forwards/feed/</wfw:commentRss>
		</item>
		<item>
		<title>A Manifesto Of Sorts</title>
		<link>http://www.berniecode.com/blog/2006/10/24/hello-world/</link>
		<comments>http://www.berniecode.com/blog/2006/10/24/hello-world/#comments</comments>
		<pubDate>Tue, 24 Oct 2006 07:46:58 +0000</pubDate>
		<dc:creator>bernie</dc:creator>
		
		<category><![CDATA[news]]></category>

		<guid isPermaLink="false">http://www.berniecode.com/blog/?p=3</guid>
		<description><![CDATA[I&#8217;ve been meaning to set up a personal website for some time now. This blog is a place to help me organise my thoughts, and I hope in time it will grow into something that people find useful.
With that in mind here are my intentions:

Content over opinion: nobody needs yet another developer weighing in on [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been meaning to set up a personal website for some time now. This blog is a place to help me organise my thoughts, and I hope in time it will grow into something that people find useful.</p>
<p>With that in mind here are my intentions:</p>
<ul>
<li><span style="font-style: italic">Content over opinion</span>: nobody needs yet another developer weighing in on why Web2.0 is so awesome/despicable (delete as appropriate)</li>
<li><span style="font-style: italic">Experimental over practical</span>: I already spend 8 hours a day building reliable things with stable components and well understood techniques. Here I get to have more fun.</li>
<li><span style="font-style: italic">Conversation over broadcast</span>: I&#8217;m not even sure if I&#8217;ll have many readers, but any that I do have I invite to email me with any points, technical questions, suggestions, praise, damnation&#8230; Really, I <span style="font-style: italic">love</span> getting emails from people I don&#8217;t know and I&#8217;m not sure the novelty will ever wear off. I&#8217;ll reply to all emails and all blog comments.</li>
</ul>
<p>Bernie :o)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berniecode.com/blog/2006/10/24/hello-world/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
