<?xml version="1.0" encoding="UTF-8"?>
<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/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Christoph Dorn - All around the PHP toolchain &#187; Mozilla</title>
	<atom:link href="http://www.christophdorn.com/Blog/category/mozilla/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.christophdorn.com/Blog</link>
	<description>Just another WordPress site</description>
	<lastBuildDate>Wed, 03 Aug 2011 21:56:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Integrating FirePHP for Ajax Development</title>
		<link>http://www.christophdorn.com/Blog/2009/04/03/how-to-integrate-firephp-for-ajax-development/</link>
		<comments>http://www.christophdorn.com/Blog/2009/04/03/how-to-integrate-firephp-for-ajax-development/#comments</comments>
		<pubDate>Sat, 04 Apr 2009 06:09:54 +0000</pubDate>
		<dc:creator>Christoph Dorn</dc:creator>
				<category><![CDATA[FirePHP]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Musings / Explorations]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[development]]></category>

		<guid isPermaLink="false">http://www.christophdorn.com/Blog/?p=228</guid>
		<description><![CDATA[UPDATE: Oct 20, 2010 Since writing this article I have been working on FirePHP 1.0 and a new client tool to achieve the kinds of things I describe below much more easily. The new tool is called FirePHP Companion and &#8230; <a href="http://www.christophdorn.com/Blog/2009/04/03/how-to-integrate-firephp-for-ajax-development/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<h2>UPDATE: Oct 20, 2010</h2>
<p>Since writing this article I have been <a href="http://www.christophdorn.com/Research/">working</a> on <a href="http://reference.developercompanion.com/#/Tools/FirePHPCompanion/Introduction/">FirePHP 1.0</a> and a <a href="http://www.christophdorn.com/Tools/#FirePHP Companion">new client tool</a> to achieve the kinds of things I describe below <b>much more easily</b>. The new tool is called <a href="http://www.christophdorn.com/Tools/#FirePHP Companion">FirePHP Companion</a> and aimed at streamlining the PHP development workflow. There is still a lot of work left to do, but you can already take a look at how the demo provided here <a href="http://www.christophdorn.com/Blog/2010/08/24/gain-insight-into-your-cache-interaction-with-firephp-companion/">can be implemented easily with FirePHP Companion</a>.</p>
<p><br/></p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 30px;" width="60%" valign="top">As mentioned in a <a href="http://www.christophdorn.com/Blog/2008/11/29/firephp-column-in-november-phparchitect/" target="_blank">previous post</a> I wrote a column for <a href="http://www.phparch.com/magazine/2008/november/" target="_blank">php|architect</a> about how FirePHP can be used for Ajax development. I am re-publishing the complete article here. Enjoy!</p>
<p><strong>FirePHP for Ajax Development</strong></p>
<div style="color: #000080; font-weight: bold; font-size:120%;">There are many integrated development environments and tools available to aid in building Web 2.0 AJAX applications with PHP, but nothing comes close to the ease of use and tight Firebug integration that FirePHP provides.</div>
</td>
<td width="40%" valign="top">
<div style="background-color: #EEEEEE; padding: 5px; margin: 2px;"><strong>PHP:</strong> 5.2+</div>
<div style="background-color: #EEEEEE; padding: 5px; margin: 2px;"><strong>Other software:</strong> Firefox, Firebug</div>
<div style="background-color: #EEEEEE; padding: 5px; margin: 2px;"><strong>Useful/Related links:</strong></p>
<ul style="margin: 0px; margin-left: -10px; margin-top:5px;">
<li style="margin-bottom: 0px; margin-top: 2px;">Firefox: <a href="http://www.getfirefox.com/" target="_blank">http://www.getfirefox.com/</a></li>
<li style="margin-bottom: 0px; margin-top: 2px;">Firebug: <a href="http://www.getfirebug.com/" target="_blank">http://www.getfirebug.com/</a></li>
<li style="margin-bottom: 0px; margin-top: 2px;">FirePHP: <a href="http://www.firephp.org/" target="_blank">http://www.firephp.org/</a></li>
<li style="margin-bottom: 0px; margin-top: 2px;">Demo: <a href="http://www.firephp.org/Examples/PHPArchitect/" target="_blank">View</a> | <a href="http://www.firephp.org/Examples/PHPArchitect/Demo.zip" target="_blank">Download</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<p><a href="http://www.firephp.org/" target="_blank"><img class="alignright size-medium wp-image-236" title="FirePHP Logo" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/04/firephp_large.png" alt="" width="158" height="154" /></a>My purpose in this column is to introduce you to <a href="http://www.firephp.org/" target="_blank">FirePHP</a>, the problem it solves, and how it is intended to work within your application for maximum benefit. I will present some useful high-level knowledge to make it easier for you to integrate FirePHP into your application.</p>
<p>This is not a step-by-step tutorial. I have made a complete <a href="http://www.firephp.org/Examples/PHPArchitect/" target="_blank">demo</a> available for <a href="http://www.firephp.org/Examples/PHPArchitect/Demo.zip" target="_blank">download</a>, along with some useful libraries illustrating all the concepts covered here. I want to emphasize that the demo is only one possible implementation. There are many other possibilities.</p>
<p><span id="more-228"></span></p>
<p><strong>The Problem</strong></p>
<p>Building AJAX applications brings some new challenges to PHP developers. Apart from the fact that you need to learn JavaScript, which is probably a good idea anyway, you need to figure out a way to debug your AJAX requests. There are primarily two ways to do that.</p>
<p>The more involved option is to use an IDE with an integrated debugger. While this may be the most powerful approach, it typically is also the most complex, expensive, time-consuming and cumbersome, especially when it comes to triggering the debugger for a specific request.</p>
<p>The second option is to simply print out debug information using <em>var_dump()</em> or <em>print_r()</em>. This approach requires you to examine the response of the request in Firebug, or to run it in its own browser tab. It also breaks your JavaScript AJAX code, because the response is no longer a valid XML or JSON structure.</p>
<p>The ideal solution would be something that is easy to set up and use; something that will allow you to view any PHP variable without breaking the response content, so that your JavaScript code can continue to execute as intended. This is precisely what FirePHP is designed to do — this, and more.</p>
<p><strong>The FirePHP Solution</strong></p>
<p><a href="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/04/screenshot_1.png"><img class="alignright size-medium wp-image-237" title="Screenshot" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/04/screenshot_1.png" alt="" width="277" height="300" /></a>FirePHP solves the problem of AJAX debugging by sending debug information along with the response. To avoid breaking the response content, the debug information is placed into special HTTP response headers. This works for all types of requests, not just AJAX requests, which means you can even debug requests for images that are dynamically generated by a PHP script. You can use FirePHP in your development environment, or use it to track down bugs that only appear on your production site.</p>
<p>The FirePHP system requires two components to work. The first of these comes in the form of a <a href="https://addons.mozilla.org/en-US/firefox/addon/6149" target="_blank">Firefox Extension</a> that extends <a href="http://www.getfirebug.com/" target="_blank">Firebug</a>. It reads the special response headers and presents the debug data in an intelligent way within Firebug. The second component is a <a href="http://www.firephp.org/HQ/Install.htm" target="_blank">PHP server library</a> that provides the necessary functionality to encode PHP variables and sends them in the response headers.</p>
<p>Detailed information regarding how to install the FirePHP components and how to get started with their basic functionality is available on the FirePHP <a href="http://www.firephp.org/" target="_blank">website</a>, to which you will be directed when you install the FirePHP Firefox extension.</p>
<p><strong>Persistent and Controllable</strong></p>
<p>There is significant benefit in leaving debugging code in your application and being able to easily enable the desired debug output as and when required. This is primarily useful when working with object oriented code, where common components are re-used in different areas of the application and may become part of several iterations of debugging when tied into different end-user functionality. One such component, for example, would be a caching object.</p>
<p>When debugging such an object, you would typically want to be able to view information about the cache such as filenames, whether the data was created or fetched from the cache, and when the cache entry will expire. Going one step further, during debugging, you would want to be able to control the cache lifetime, force cache expiry, and conduct some analysis on the amount of resources used and time taken to create the data that is being cached.</p>
<p>Having debugging code in your application and being able to trigger it in a secure way may also come in extremely handy when something that worked fine during development is not working quite as it should in your production environment. In such a case, you&#8217;ll want to be able to easily view specific information about your backend without making it available to all.</p>
<p><strong>Design Philosophy</strong></p>
<p><a href="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/04/console_helloworld_screenshot1.png"><img class="alignright size-medium wp-image-238" title="Screenshot" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/04/console_helloworld_screenshot1.png" alt="" width="300" height="116" /></a>FirePHP is designed to be non-intrusive so that you can decide how and where to use it within your application. It essentially provides a mechanism to send logging events to the Firebug Console without interfering with your application. There is no built-in security to safeguard the data you send, which means that <em>you</em> are in charge of security and in charge of deciding what to send, when to send it and to whom.</p>
<p>All data is sent in clear text in the response headers, unless the request was made via HTTPS in which case the entire response —including the headers— will be encrypted.</p>
<p>Although the chosen design may put the burden of security on you, it gives you complete freedom over how to use FirePHP within your application. The remainder of this discussion will focus on the best practices of how to integrate FirePHP into your application to implement some powerful debugging functionality while ensuring security and maintaining flexibility. A basic understanding of the <a href="http://www.firephp.org/HQ/Use.htm" target="_blank">FirePHP API</a> will help, but is not essential.</p>
<p><strong>Enabling FirePHP</strong></p>
<p>As soon as you include the FirePHP server library in your application, FirePHP is enabled and you can log to Firebug:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">FB<span style="color: #339933;">::</span><span style="color: #990000;">log</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'This is a log message'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This makes it very easy to get started, and provides a great alternative to using <em>var_dump()</em> or <em>print_r()</em> during development or ad-hock debugging. When you use FirePHP in this way, you would typically only log variables during development and remove all your logging statements before uploading your code to a production server.</p>
<p>If there are logging statements you want to keep in your code, to save you time in future, you can manually disable FirePHP with</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">FB<span style="color: #339933;">::</span><span style="color: #004000;">setEnabled</span><span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>before uploading your code. This will stop your logging messages from being sent. However, if you rely on this method, apart from the fact that it is cumbersome, there will likely come a time when you forget to disable it before uploading your code. In that case anyone who has FirePHP installed will be able to see your logging messages, which may or may not be a problem depending on the data you are logging. You probably don&#8217;t want that to happen.</p>
<p>A better approach would be to use a configuration setting to determine whether FirePHP should be enabled. Chances are your application already uses a configuration file you can use. Adhering to good security principles, you will want to disable FirePHP by default and only enable it if a setting is found that specifically overrides the default. The code could look something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$settings</span> <span style="color: #339933;">=</span> <span style="color: #339933;">@</span><span style="color: #990000;">parse_ini_file</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'settings.ini'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$settings</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'FirePHP'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'Enabled'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  FB<span style="color: #339933;">::</span><span style="color: #004000;">setEnabled</span><span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
  FB<span style="color: #339933;">::</span><span style="color: #004000;">setEnabled</span><span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>When this is set up, all you will need to do is use different values in your configuration files in your development and production environments, and you will never need to worry about FirePHP being enabled by accident again.</p>
<p>If you want to enable FirePHP for specific users no matter which environment the application is running in, you can tie the above code into your user privilege or session system.</p>
<p><strong>Selective Logging</strong></p>
<p><a href="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/04/demoscreenshot.png"><img class="alignright size-medium wp-image-239" title="Demo Screenshot" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/04/demoscreenshot.png" alt="" width="300" height="211" /></a>To realize selective logging by allowing a user —or more specifically, a developer— to turn on and off specific groups of logging messages, requires a bit more work. Such a system typically consists of an administration interface allowing the developer to tweak logging options, and a wrapper object for FirePHP that is used in the application to intercept logging messages and only send them if requested.</p>
<p>The options defined in the administration interface will need to be accessible to the wrapper in the application. This can be done on the back-end via a shared session or cached file, or on the front-end via cookies. The approach you choose depends on how your application is structured and whether the administration system runs on the same domain as your application. The cookie approach is probably the easiest to set up, allowing the administration interface to be coded entirely in JavaScript.</p>
<p>Let&#8217;s say you implement the administration interface for the debugging options in JavaScript. The user interface could be tailored to look consistent with the rest of your administration system, and could be used to set, say, a cookie named <em>Debug</em> to a value of <em>DisableCache</em> when that option is selected.</p>
<p>Your wrapper on the application side would look something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> Debug
<span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">public</span> static <span style="color: #000000; font-weight: bold;">function</span> getOption<span style="color: #009900;">&#40;</span><span style="color: #000088;">$name</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$options</span> <span style="color: #339933;">=</span> <span style="color: #339933;">@</span><span style="color: #990000;">explode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'|'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$_COOKIE</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'Debug'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">return</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">is_array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$options</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span>
    <span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$name</span><span style="color: #339933;">,</span> <span style="color: #000088;">$options</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> ? <span style="color: #009900; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>You can then ask the wrapper whether a specific option is enabled, and act accordingly:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>Debug<span style="color: #339933;">::</span><span style="color: #004000;">getOption</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'DisableCache'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">// code to disable cache</span>
  FB<span style="color: #339933;">::</span><span style="color: #004000;">info</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Cache has been disabled!'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">// default code</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Make sure that the debugging options always override default behaviour, and that the application will continue to function if no debug cookie or option is defined. You should always return <em>FALSE</em> for the debug options if the user is not authorized to use them.</p>
<p>I encourage you to look at the <a href="http://www.firephp.org/Examples/PHPArchitect/Demo.zip" target="_blank">source code</a> of the <a href="http://www.firephp.org/Examples/PHPArchitect/" target="_blank">demo</a> mentioned earlier, which illustrates the cookie and JavaScript-based administration interface approach. Rip out the code you like and make it your own.</p>
<p><strong>An Eye to the Future</strong></p>
<p>I have been toying around with development and debugging systems for a long time. FirePHP is my first public, stable and practical implementation to a problem area I find fascinating.</p>
<p>I have never been a real fan of interactive debuggers, primarily because they don&#8217;t support my <em>write a little code, run it, write some more, re-run it</em> development approach, which seems to be quite common when building Web applications with scripting languages. As FirePHP is coming into its own and I can observe how others use it, I see tremendous opportunity in evolving this type of development approach further. I&#8217;m not talking here about just the debugging aspect, but rather a system that can easily be tied into any application to provide the developer with a powerful user interface that can visualize the internals of an application. One that allows the developer to configure components for different environments and stages of the development cycle.</p>
<p>It would be much easier for a new developer to learn their way around a codebase if they could see the order of execution visually on one page without having to step through the code. It would be trivial to provide mock data to application objects where certain services or classes are not yet complete by defining the data in your browser.</p>
<p>I encourage you to look both at FirePHP and at the big picture it points to. FirePHP represents a humble beginning to a problem area that is desperate for attention, and provides an enormous opportunity to make all our lives easier.</p>
<h2>UPDATE: Oct 20, 2010</h2>
<p>Since writing this article I have been <a href="http://www.christophdorn.com/Research/">working</a> on <a href="http://reference.developercompanion.com/#/Tools/FirePHPCompanion/Introduction/">FirePHP 1.0</a> and a <a href="http://www.christophdorn.com/Tools/#FirePHP Companion">new client tool</a> to achieve what I described above. There is still a lot of work left to do, but you can already take a look at how the demo provided here <a href="http://www.christophdorn.com/Blog/2010/08/24/gain-insight-into-your-cache-interaction-with-firephp-companion/">can be implemented <b>much more easily</b> with FirePHP Companion</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christophdorn.com/Blog/2009/04/03/how-to-integrate-firephp-for-ajax-development/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Hacking Bespin</title>
		<link>http://www.christophdorn.com/Blog/2009/02/26/hacking-bespin/</link>
		<comments>http://www.christophdorn.com/Blog/2009/02/26/hacking-bespin/#comments</comments>
		<pubDate>Thu, 26 Feb 2009 20:34:20 +0000</pubDate>
		<dc:creator>Christoph Dorn</dc:creator>
				<category><![CDATA[Bespin]]></category>
		<category><![CDATA[Eclipse]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[CANVAS]]></category>
		<category><![CDATA[dive and swim]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[monkey patching]]></category>
		<category><![CDATA[UI Toolkit]]></category>

		<guid isPermaLink="false">http://www.christophdorn.com/Blog/?p=203</guid>
		<description><![CDATA[I finally had a bit of time to look under the hood of Bespin. Hacking around on a new piece of software is like raiding a candy store if you have a sweet tooth. Especially when it is as concise, &#8230; <a href="http://www.christophdorn.com/Blog/2009/02/26/hacking-bespin/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I finally had a bit of time to look under the hood of <a href="http://labs.mozilla.com/2009/02/introducing-bespin/" target="_blank">Bespin</a>. Hacking around on a new piece of software is like raiding a candy store if you have a sweet tooth. Especially when it is as concise, well thought out, and implemented in JavaScript like Bespin.</p>
<p>What sealed the deal for me was the result I got when I applied a 10 minute <em>inspect-search-edit-refresh</em> technique I use when learning the ropes of a new architecture and implementation. Lets call this technique &#8220;dive and swim&#8221;.</p>
<p>Before I get into what got me excited I am going to give you an insight into how I approached this new candy store called Bespin.</p>
<p><span id="more-203"></span></p>
<p><strong>Extra! Extra! Read all about it!</strong></p>
<p>Before you dive into new code you are well advised to get your bearings first. By bearings I mean valuable facts about the application that give you a rough overview about what to expect. This is important because it reduces the likelyhood of running into dead ends when you investigate the code and can save you a lot of time.</p>
<p>Bearings for Bespin are things like:</p>
<ul>
<li>It&#8217;s all open source</li>
<li>The client is written in JavaScript</li>
<li>It has a client and server component</li>
<li>It uses CANVAS to render it&#8217;s UI</li>
<li>It has a grand vision</li>
</ul>
<p>There are many sources you can use to get some important facts:</p>
<ul>
<li>Read the announcement</li>
<li>Play with the demo</li>
<li>Skim the documentation categories/headings</li>
<li>Skim mailing list subjects (to determine aspects that excite people or common problem areas)</li>
<li>Skim README files</li>
</ul>
<p>The idea is to get a global picture of what to expect, not to actually study anything in detail unless something catches your interest of course. Now bearings are useless if you don&#8217;t know how to interpret them. That is where your experience and intuition come into play. The more you have the faster you can move to the point where you can skip a lot of these steps &#8211; because software development is an art, but also a science and with science comes true and tried techniques/concepts/standards that span all decent implementations.</p>
<p>Going back to the Bespin bearings from above, filtered through my experience I get:</p>
<ul>
<li><span style="color: #c0c0c0;"><em>It&#8217;s all open source</em></span> &#8211; You can download and play with the whole system, discuss it with others, search online for blog posts, read mailing lists etc&#8230;</li>
<li><span style="color: #c0c0c0;"><em>The client is written in JavaScript</em></span> &#8211; The client can be extended and <a href="http://en.wikipedia.org/wiki/Monkey_patch" target="_blank">monkey patched</a> easily and refreshed in the browser to see the changes.</li>
<li><span style="color: #c0c0c0;"><em>It has a client and server component</em> </span>- The server component is likely not implemented in JavaScript as server-side javascript is still too new to be used as the primary backend for a project that aims to gain a large audience fast. So the server is written in a different language than the client leading to the conclusion that some well-known protocol that is cross-language is likely used to link the two.</li>
<li><span style="color: #c0c0c0;"><em>It uses CANVAS to render it&#8217;s UI</em></span> &#8211; see below</li>
<li><span style="color: #c0c0c0;"><em>It has a grand vision</em></span> &#8211; The developers put a lot of thought into it (I should find well-structured code) as only a fool would set grand goals and publicly parade them without having the experience, insight, research, passion and backing to actually follow through.</li>
</ul>
<p>While the bearings are objective and subjective <em>facts</em> your interpretations are <em>assumptions</em> you carry into the candy store and validate as you raid the shelves (read files).</p>
<p><strong>The CANVAS Bearing</strong></p>
<p>For me the most interesting bearing and reason for further investigation (other than the explosive welcome Bespin has received) was the fact that is uses the <a href="http://en.wikipedia.org/wiki/Canvas_(HTML_element)" target="_blank">CANVAS</a> HTML element to render it&#8217;s <a href="http://en.wikipedia.org/wiki/User_Interface" target="_blank">User Interface</a>. Why is the whole <em>CANVAS</em> thing so interesting? Because <em>CANVAS</em> has been lurking in the shadows of <em>HTML+CSS</em> for a while and until now never showed itself in this way; maybe for games; but not for a component-based UI with user interaction (at least to the best of my knowledge).</p>
<p>Why is this whole <em>CANVAS</em> UI implementation so interesting to me? About 10 years ago I wrote something similar using Java. At the time <a href="http://en.wikipedia.org/wiki/Swing_(Java)" target="_blank">SWING</a> just came out, was not known to me, not practical to use yet or did not do what I needed at the time (I cannot remember) so I ended up writing my own UI toolkit.</p>
<p>I created classes for different UI components and layout managers that rendered pixels into a coordinate system that was displayed to the user as an image. Mouse events on the image were captured and dispatched to the appropriate UI component that was rendered at the given coordinates. The whole UI layout and components were defined using an XML document and each component had a data provider class that buffered data access to underlying data sources. Components were linked and business logic added via an event system using listeners and dispatchers.</p>
<p>From what I remember I spent a lot of time on this. At least 6 months of development while studying at university and the result looked and worked pretty nice. Here is a few screenshots I was able to dig up. Have not found the code yet.</p>
<table border="0" cellpadding="5">
<tbody>
<tr>
<td rowspan="2"><a href="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/v10.gif"><img class="alignnone size-medium wp-image-213" title="Shopping Cart Admin" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/v10.gif" alt="" width="300" height="230" /></a></td>
<td><a href="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/asw1.jpg"><img class="alignnone size-thumbnail wp-image-214" title="Meta Editor 1" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/asw1.jpg" alt="" width="150" height="110" /></a></td>
</tr>
<tr>
<td><a href="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/asw2.jpg"><img class="alignnone size-thumbnail wp-image-215" title="Meta Editor 2" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/asw2.jpg" alt="" width="150" height="110" /></a></td>
</tr>
</tbody>
</table>
<p>When looking at Bespin I used my past experience in writing a similar UI toolkit as a map so I knew what to look for. I roughly knew what was needed to implement the Bespin UI functionality and had a shortlist of concepts in mind of how the whole app was put together.</p>
<p>Having such past experience gave me an unfair advantage in this case. It goes to show that any experimentation you do in your early years of development may potentially pay off in future.</p>
<p>Now I don&#8217;t want to promise something I cannot deliver on but I would not be surprised if I ended up putting some real time into hacking around with the CANVAS UI Toolkit in Bespin, pulling it out of Bespin and looking at how I can expand on it and incorporate it into some of my other projects.</p>
<p><strong>(Inspect&lt;-&gt;Search)-(Edit&lt;-&gt;Refresh)</strong></p>
<p>Once you found your bearings and formed your assumptions you are ready to dive into the code. When using the <em>dive and swim</em> technique you are best advised to use it on a working install of the app. It has to be working because you are going to make edits to the code and then refresh/restart the app to see what changed.</p>
<p style="padding-left: 30px;"><strong><em>Inspect</em></strong></p>
<p style="padding-left: 30px;">Start by asking yourself a question. Something like: <em>How can I make a simple change to the code that will change something in the UI?</em></p>
<p style="padding-left: 30px;">Combine that with your asumptions and you get something like: <em>Let&#8217;s look for the generic UI toolkit classes.</em> You arrive at this action step because you know what is likely needed to render the UI and you know how it is likely implemented.</p>
<p style="padding-left: 30px;">Browse the code tree in your IDE&#8217;s Project Explorer (I use <a href="http://www.eclipse.org/" target="_blank">Ecplise</a>) and open files that based on their name and directory could have something to do with the UI toolkit. When you find something that looks like it is related look for <em>variable, class</em>, <em>object member</em> or <em>function</em>/<em>method</em> names that are likely part of a public API of the UI toolkit and used wherever the application defines it&#8217;s UI.</p>
<p style="padding-left: 30px;">For instance I found the <em>Scrollbar</em> variable/class in <em>/frontend/js/th/components.js</em></p>
<p style="padding-left: 30px;"><strong><em>Search</em></strong></p>
<p style="padding-left: 30px;">Next you open a search dialog box that can search across all files in the project and input your <em>Scrollbar</em> keyword. The search result in Ecplise is nice because it shows you the files containing matches and the location of the files in the project directory structure. With every search you do you will get more familiar with the way the code is structured as the results show you where and how (once you inspect the result files and matches) the public API of different components is used within the app.</p>
<p style="padding-left: 30px;"><a href="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/aptana-studioscreensnapz001.png"><img class="alignnone size-medium wp-image-208" title="Search Results" src="http://www.christophdorn.com/wordpress/wp-content/uploads/2009/02/aptana-studioscreensnapz001.png" alt="" width="300" height="141" /></a></p>
<p style="padding-left: 30px;">Doing this search &amp; inspect on Bespin for example revealed to me that it looks like the Scrollbar defined as part of the UI toolkit is used for other UI toolkit components but not for the editor which seems to implement it&#8217;s own scrollbar.</p>
<p style="padding-left: 30px;">When I was skimming <em>/frontend/js/editor/editor.js</em> I saw a variable that caught my attention as a potentical candidate I can edit to create a simple change in the UI (my original objective): <em>this.GUTTER_WIDTH</em> in <em>Bespin.Editor.UI</em>.</p>
<p style="padding-left: 30px;"><strong><em>Edit</em></strong></p>
<p style="padding-left: 30px;">Make a small change in the code. When setting a variable to a new value, choose a value that you think will result in a noticable difference but one that you think still falls within the acceptable value range of the variable that may or may not be explicitly validated. You can also modify methods, add <em>alert()</em> calls or log to <a href="http://www.getfirebug.com/" target="_blank">Firebug</a> depending on what you are trying to figure out.</p>
<p style="padding-left: 30px;">I changed the value of <em>GUTTER_WIDTH</em> from 54 to 34.</p>
<p style="padding-left: 30px;"><strong><em>Refresh</em></strong></p>
<p style="padding-left: 30px;">The final step is to restart the application. Since Bespin is implemented using JavaScript this is really easy and requires only a refresh of the page. Look for the change you intended on making. If you can find it your quest was successful, if not you will have to trace the code a bit more to see what went wrong.</p>
<p style="padding-left: 30px;">I was very happy when I saw the gutter shrink in size after a quick flicker of the UI (the refresh is fast which helps a lot in speeding up your <em>edit&lt;-&gt;refresh</em> iterations). This humble result was enough to get me excited because after only investing 10 minutes I got a result I expected. Going into this I had an expectation of how easy it should be but nothing prepares you for how you feel when it actually is that simple, works and just feels right.</p>
<p><strong>In Conclusion<br />
</strong></p>
<p>There are many ways to go about learning the code of a new application. I shared with you a technique I have developed over the years that has served me well and got me results fast in short periods of time. It works particularly well with JavaScript and more generally scripting languages as you can search-edit-refresh the application in a matter of seconds.</p>
<p>If you are interested in <a href="https://developer.mozilla.org/en/Extensions" target="_blank">Firefox extension development</a> I highly recommend applying this technique to see how it works for you when learning from other people&#8217;s extensions because it seems to be particularly effective. I found that out while developing <a href="http://www.firephp.org/" target="_blank">FirePHP</a> where I needed to learn the <a href="http://www.getfirebug.com/" target="_blank">Firebug</a> code.</p>
<p>Remember that the <em>dive and swim</em> technique is an iterative process. You need to stay flexible and follow your intution and whatever catches your attention during the <em>inspect&lt;-&gt;search</em> iterations.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christophdorn.com/Blog/2009/02/26/hacking-bespin/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>The Bespin Think Tank</title>
		<link>http://www.christophdorn.com/Blog/2009/02/20/the-bespin-think-tank/</link>
		<comments>http://www.christophdorn.com/Blog/2009/02/20/the-bespin-think-tank/#comments</comments>
		<pubDate>Fri, 20 Feb 2009 20:56:22 +0000</pubDate>
		<dc:creator>Christoph Dorn</dc:creator>
				<category><![CDATA[Bespin]]></category>
		<category><![CDATA[Eclipse]]></category>
		<category><![CDATA[FirePHP]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[developer tools]]></category>
		<category><![CDATA[E4]]></category>
		<category><![CDATA[IDE]]></category>

		<guid isPermaLink="false">http://www.christophdorn.com/Blog/?p=199</guid>
		<description><![CDATA[I recently discovered a new Mozilla Labs project called Bespin. From the release announcement: Just as Mozilla enables massive innovation by making Firefox open on many levels, we hope to do the same with Bespin by developing an extensible framework &#8230; <a href="http://www.christophdorn.com/Blog/2009/02/20/the-bespin-think-tank/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I recently discovered a new Mozilla Labs project called <a href="http://labs.mozilla.com/2009/02/introducing-bespin/" target="_blank">Bespin</a>. From the release announcement:</p>
<blockquote><p>Just as Mozilla enables massive innovation by making Firefox open on many levels, we hope to do the same with Bespin by developing an extensible framework for Open Web development. We’re particularly excited by the prospect of empowering Web developers to hack on the editor itself and make it their own.</p></blockquote>
<p>I encourage you to check out this project. It&#8217;s in a very early stage of development, so don&#8217;t expect to switch IDE&#8217;s any time soon, but based on the amount of interest it has already generated the project is going to evolve quickly.</p>
<p><span id="more-199"></span></p>
<p>If you want to see what is being talked about in terms of features and opportunities take a look at the <a href="http://groups.google.com/group/bespin" target="_blank">Bespin Think Tank</a>. That is what I am calling the mailing list for now as it seems to be one massive flow of brainstorming rather than action oriented messages.</p>
<p>Exciting to me is that several other notable projects are already talking with the folks at Bespin to see how they can work together. One is the <a href="http://groups.google.com/group/firebug-working-group/browse_thread/thread/551a102f90ba8a9f" target="_blank">Firebug Working Group</a> with the aim of integrating <a href="http://www.getfirebug.com/" target="_blank">Firebug</a> with Bespin, the other is the <a href="http://wiki.eclipse.org/E4/" target="_blank">E4 Eclipse Project</a> which is <em>a community effort for building the next generation of the Eclipse Platform. </em>There is already an experimental  <a href="http://wiki.eclipse.org/E4/Bespin" target="_blank">e4 Bespin server</a> which was announced by <a href="http://borisoneclipse.blogspot.com/2009/02/eclipse-in-cloud.html" target="_blank">Boris Bokowski</a> and a cross-country in-person meeting has been setup between the projects to discuss further collaboration.</p>
<p><strong>My Take on Bespin</strong></p>
<p>I think the whole idea of an <em>extensible framework for Open Web development</em> is great. A major hurdle to IDE innovation is the barrier to entry experienced by developers wanting to add features to existing IDE&#8217;s. To add features to Eclipse for example you need to be a Java developer which limits the amount of people who would even consider writing plugins. If Eclipse plugins can be written in JavaScript using a powerful and intuitive plugin development environment Eclipse could experience the same kind of extension explosion as Firefox.</p>
<p>Since my last post about an <a rel="bookmark" href="http://www.christophdorn.com/Blog/2009/01/16/a-case-for-an-ajax-based-eclipse-project-explorer/" target="_blank">AJAX-based Eclipse Project Explorer</a> I have started communicating with the E4 project team. My interest is in building a plugin framework that enables developers to build and publish JavaScript-based UI <em>Widgets</em> using Firefox/Firebug and then be able to run them in any web page, browser extension and IDE staring with Eclipse.</p>
<p>The focus of my effort is not on just re-implementing existing IDE functionality in JavaScript but rather linking Eclipse Views such as the project explorer to the web so that data available locally may be augmented with data available from web services. Once you can build Eclipse Views using JavaScript and feed these with local and remote data I think we can speed-up innovation of IDE&#8217;s and link them much closer to the <em>cloud</em> where it makes sense.</p>
<p><strong>FirePHP and Beyond</strong></p>
<p>If you are using and like <a href="http://www.firephp.org/" target="_blank">FirePHP</a> you are going to love what I am working on as the next evolution of my concept of web-based developer tools. I&#8217;ll be posting more information on my blog in the coming months. I encourage you to subscribe if you want to see what I am up to and provide your feedback early-on.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christophdorn.com/Blog/2009/02/20/the-bespin-think-tank/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A case for an AJAX-based Eclipse Project Explorer</title>
		<link>http://www.christophdorn.com/Blog/2009/01/16/a-case-for-an-ajax-based-eclipse-project-explorer/</link>
		<comments>http://www.christophdorn.com/Blog/2009/01/16/a-case-for-an-ajax-based-eclipse-project-explorer/#comments</comments>
		<pubDate>Fri, 16 Jan 2009 19:34:12 +0000</pubDate>
		<dc:creator>Christoph Dorn</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Musings / Explorations]]></category>
		<category><![CDATA[Zend Framework]]></category>
		<category><![CDATA[aptana]]></category>
		<category><![CDATA[cloud development]]></category>
		<category><![CDATA[Eclipse]]></category>
		<category><![CDATA[platform-as-a-service]]></category>
		<category><![CDATA[project explorer]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[Zend_Tool]]></category>

		<guid isPermaLink="false">http://www.christophdorn.com/Blog/?p=179</guid>
		<description><![CDATA[Integrated Development Environments in general and Eclipse/Aptana Studio specifically provide tree-based project explorers used to locate and launch files by displaying the file system that contains your project code. Typically the simple directory and file tree is marked up with: &#8230; <a href="http://www.christophdorn.com/Blog/2009/01/16/a-case-for-an-ajax-based-eclipse-project-explorer/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Integrated Development Environments in general and <a href="http://www.eclipse.org/" target="_blank">Eclipse</a>/<a href="http://www.aptana.com/studio" target="_blank">Aptana Studio</a> specifically provide tree-based project explorers used to locate and launch files by displaying the file system that contains your project code. Typically the simple directory and file tree is marked up with:</p>
<ul>
<li>Icons for different file extensions</li>
<li>Version information about the directories and files if connected to a <a href="http://en.wikipedia.org/wiki/Revision_control" target="_blank">version control system</a></li>
<li>Context menus specific to each directory and file</li>
</ul>
<p>This widely accepted approach to represent code files in a project has worked well in the past because projects and project components were typically:</p>
<p><span id="more-179"></span></p>
<ul>
<li>Written in one or several complementing programming languages</li>
<li>Largely self-contained with required libraries imported into the project</li>
<li>Mostly closed off to the outside and interacting with other applications through interfaces available only when the application is running in a development, testing or production environment</li>
<li>Left for the developer to locate on the internet, download, import, maintain, test and publish</li>
</ul>
<p>The traditional project explorer worked well for traditional web applications because it left application and file structure completely up to the developer. This was important because there were few frameworks available that combined HTML, CSS, JavaScript and PHP code into a cohesive architecture. The developer was able to structure code based on experience, trial and error and best practices where existent.</p>
<p>The downside of this approach to project structuring is that there is little standardization between projects making code sharing difficult and increasing the learning curve for new developers learning an existing application.</p>
<p>While code and component re-use and standardization across projects was and still is desirable the traditional project explorer offers little support to the developer in keeping things standardized. After all it only mirrors what was on the file system without any manipulation of the directory structure.</p>
<p>The need for a new kind of project explorer for web applications is primarily driven by forces such as:</p>
<ul>
<li>Increasing standardization in web technology library distribution and project integration</li>
<li>Application deployment to standardized cloud environments</li>
<li><a href="http://en.wikipedia.org/wiki/PaaS" target="_blank">Platform-as-a-service</a> offerings</li>
<li>Open source movement with many contributors to many project components</li>
</ul>
<p><strong>The AJAX-based Project Explorer</strong></p>
<p>The purpose of the AJAX-based Project Explorer (APE) is to:</p>
<blockquote><p>Liberate application architecture and lifecycle possibilities by lifting code organization from the file system.</p></blockquote>
<p>For an APE the local (or remote) file system is no longer the source of data for the project explorer. Furthermore the APE does not dictate how a project&#8217;s directories and files are displayed allowing for an application-specific user interface. The interface would of course be an AJAX app that is fed from a server.</p>
<p>Thinking this through from a traditional web application development perspective makes little sense. Where would the AJAX app be hosted? How will the AJAX app know about the project files? Where do the project files reside?</p>
<p>The key to the APE is standardization and the use of a framework or a platform as a service. The framework would provide the AJAX app for the APE and the developer would write the application within the possibilities of the framework.</p>
<p><strong>Advantages (Local Development)<br />
</strong></p>
<p>The advantages to an APE are numerous and significant. Let&#8217;s say you want to develop a PHP application. You choose <a href="http://framework.zend.com/" target="_blank">Zend Framework</a> (ZF) as your framework because it provides ultimate flexibility and power and is supported by a large and active community.</p>
<p>ZF is a good choice because it imposes some standards on you including a well-debated recommended project structure that can be described via an XML definition file. The definition file can be used by <a href="http://devzone.zend.com/article/3811-Using-Zend_Tool-to-start-up-your-ZF-Project" target="_blank">Zend_Tool</a> to make changes to your project.</p>
<p>ZF would provide an AJAX app for the APE (ZF-APE) that would be hosted on the same development server as your project code. The AJAX app would integrate with Zend_Tool to gain access to the project files in a standardised fashion via the XML project definition.</p>
<p>In it&#8217;s simplest form the ZF-APE would provide a traditional view into the project files using a file system based tree. Things start to get interesting when more meta information about code files, directory structure conventions, file contents, etc&#8230; is spliced into the ZF-APE. This information can be made available because the AJAX app is specific to the framework and the framework provides tools to reflect project meta data.</p>
<p>You could, for example offer:</p>
<ul>
<li>Filters on the file tree that would only display library files, controller files, view scripts or unit tests.</li>
<li>Recognize components (as a collection of files following certain conventions) and displaying the components in more intuitive ways rather than a simple list of files.</li>
<li>Different context menus for different files, directories and components allowing arbitrary execution of Zend_Tool features such as component creation, running of unit tests and packaging of project.</li>
<li>A view that shows all controllers and actions in a tree that will launch the appropriate code file and position the cursor to the correct line when clicking on an action.</li>
<li>Coding standard validation information for each file and component (using server-based or thrid party validation services)</li>
<li>Unit test coverage information</li>
<li>Integration with a debugger showing which file you are currently stepping through</li>
</ul>
<p>The possibilities are endless. The point to note is that the APE will allow more intuitive project navigation and abstraction of standards away from files by focusing on logical entities instead. It enables simple means to acess a diverse set of files that may be spread all over the project codebase but belong together in a logical unit.</p>
<p><strong>Advantages (Platform-as-a-Service)<br />
</strong></p>
<p>Arguably the largest benefactor of the APE will be platform-as-a-service vendors. A service offering PHP, Ruby, Python, server-based JavaScript, some standard way to include common client-based JavaScript libraries, a database abstraction layer and content delivery network could provide an APE AJAX app that ties all these services into one coherent interface.</p>
<p>Rather than requiring the developer to use some online portal or vendor-specific IDE that is tied into their service (because project files are spread over several file systems in their internal system) the developer can acces the service via APE and a familiar IDE.</p>
<p>In this scenario the developer can write code, instantly preview the application on a development server provided by the vendor, publish the app to production servers and monitor it all without needing a local development environment. The vendor could even tie billing and account information into the APE to make the experience as seemless as possible.</p>
<p><strong>Technical Requirements</strong></p>
<p>Making APE a reality is actually a lot simpler than one may think. Let&#8217;s briefly examine what it will take:</p>
<ul>
<li>A new APE view for eclipse that loads any URL in an embedded browser (ideally Firefox)</li>
<li>Several API&#8217;s to bridge between the loaded AJAX app (JavaScript) and eclipse (Java)</li>
<li>A component for eclipse that communicates via the AJAX app with the project server allowing eclipse to mirror the logical project file system.</li>
</ul>
<p>Important to note is that the project server provides a LOGICAL file system to eclipse. Eclipse editors and tools are based around files and directories. Changing this would be utterly impractical and is not necessary. So we need a way to mirror the actual distributed project files from the remote system via a unified logical tree to the local eclipse environment.</p>
<p>All project files would always be present locally and sent to the server when modified. This would allow existing eclipse tools such as search and many different project inspectors to continue to function.</p>
<p>One last important point to note is the directory and file structure will be less important to the developer over time. Absolute file locations in the project will become less important and relative location to a specific context (group of files) will become the focus. The actual mirrored directory structure will be optimized for eclipse tools and not for the purpose of having an easily comprehensible directory structure as is the case in traditional project explorers.</p>
<p>The code within files must not be complete in a traditional sense as the file is only a logical bucket. For example a file can contain code for only one specific controller action without all the plumbing code to wrap the action code. By itself the code would not run. However the project server knows where the code belongs in the project, what it needs to be wrapped with and how it needs to be organized relative to other actions.</p>
<p><strong>Call to Action</strong></p>
<p>If anyone out there is interested in exploring the APE concept by building the required view into eclipse and developing the necessary API&#8217;s and sync manager I would be very interested in building the first APE AJAX app to integrate with Zend Framework.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christophdorn.com/Blog/2009/01/16/a-case-for-an-ajax-based-eclipse-project-explorer/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>FirePHP 0.2 Released</title>
		<link>http://www.christophdorn.com/Blog/2008/10/22/firephp-02-released/</link>
		<comments>http://www.christophdorn.com/Blog/2008/10/22/firephp-02-released/#comments</comments>
		<pubDate>Wed, 22 Oct 2008 23:09:05 +0000</pubDate>
		<dc:creator>Christoph Dorn</dc:creator>
				<category><![CDATA[FirePHP]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[release]]></category>

		<guid isPermaLink="false">http://www.christophdorn.com/Blog/?p=154</guid>
		<description><![CDATA[I have released a new version of FirePHP. You can download it here. It will also be available on the Mozilla Add-ons site in a few days. The release includes 27 bug fixes and feature enhancements. The scope of this &#8230; <a href="http://www.christophdorn.com/Blog/2008/10/22/firephp-02-released/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I have released a new version of FirePHP. You can download it <a href="http://www.firephp.org/" target="_blank">here</a>. It will also be available on the <a href="https://addons.mozilla.org/en-US/firefox/addon/6149" target="_blank">Mozilla Add-ons site</a> in a few days.</p>
<p>The release includes <a href="http://code.google.com/p/firephp/issues/list?can=1&amp;q=label%3Arelease-0.2" target="_blank">27 bug fixes and feature enhancements</a>. The scope of this release was primarily focused on improving the current feature set in terms of usability, reliability and support for logging complex objects. You can find the changelog <a href="http://www.firephp.org/Wiki/Development/Release02" target="_blank">here</a>.</p>
<p><span id="more-154"></span></p>
<p>After installing the FirePHP 0.2 extension you will be directed to the <a href="http://www.firephp.org/HQ/Install.htm" target="_blank">Install</a> page after your next Firefox restart. On this page you need to download the updated FirePHPCore library. Next you can visit the <a href="http://www.firephp.org/HQ/Learn.htm" target="_blank">Learn</a> page for information on how to get started with FirePHP. Finally refer to the <a href="http://www.firephp.org/HQ/Use.htm" target="_blank">Usage</a> page as a reference for all supported features.</p>
<p>I want to thank everyone who has participated in the <a href="http://forum.firephp.org/" target="_blank">Community Forum</a> and <a href="http://code.google.com/p/firephp/issues/list" target="_blank">Issue Tracker</a> to report, test and resolve issues. Your help has been invaluable to make this release possible.</p>
<p>Finally, I have a new <a href="http://www.firephp.org/HQ/Contribute.htm" target="_blank">Contribution</a> page that includes a Donation button. If FirePHP saves you time I encourage you to donate what you believe is reasonable. It will allow me to spend more time maintaining FirePHP and make improvements that are suggested.</p>
<p>The 0.2 release includes the following improvements. See the <a href="http://www.firephp.org/HQ/Use.htm" target="_blank">Usage</a> page for more information.</p>
<h3>Enhanced object logging</h3>
<p>FirePHP will now log and display non-static private and protected object members. If they are declared static they can be logged with PHP 5.3. The variable viewer will indicate the visibility with a little icon. Red is private, orange is protected and green is public. Grey means undeclared (you have assigned a value but not declared the variable in the class) and the square means it is static.</p>
<p>Logging complex objects containing cyclical references to many other objects is no longer a problem. By using options you can now specify the mximum depth to traverse objects and arrays. You can also exclude specific object members from being logged in order to remove infomation that is not required and will only slow down your debugging.</p>
<h3>File and Line Information</h3>
<p>By default you can see the source file name and line number where each message was triggered when you hover over the message in the Firebug Console.</p>
<h3>Full UTF-8 and Latin-1 Support</h3>
<p>FirePHP now supports UTF-8 and Latin-1 (ISO-8859-1) encoded files and strings. All other encodings should work as well as all data gets converted to UTF-8.</p>
<h3>Enhanced Variable display in Console</h3>
<p>The variable display in the Console has been completely overhauled. Different types of variables including objects and labels are now properly displayed, abbreviated and highlighted.</p>
<h3>Other Improvements</h3>
<ul>
<li>The Variable Viewer can be resized</li>
<li>FirePHP will tell you when you need to upgrade your server library</li>
<li>Built-in error and exception handlers</li>
<li>Message grouping</li>
<li>New object oriented API to access FirePHP via static methods</li>
<li>Support for Firebug 1.3</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.christophdorn.com/Blog/2008/10/22/firephp-02-released/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
