<?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>All I don&#039;t know</title>
	<atom:link href="http://blog.derraab.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.derraab.com</link>
	<description>About the Flash platform, JavaScript, HTML(5), e-learning software development and my computer.</description>
	<lastBuildDate>Sun, 06 May 2012 15:03:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>ActionScript performance test for Array, Object, Vector literals and Array.push, Vector.push methods</title>
		<link>http://blog.derraab.com/2012/05/06/actionscript-performance-test-for-array-object-vector-literals-and-array-push-vector-push-methods/</link>
		<comments>http://blog.derraab.com/2012/05/06/actionscript-performance-test-for-array-object-vector-literals-and-array-push-vector-push-methods/#comments</comments>
		<pubDate>Sun, 06 May 2012 14:49:40 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flash in Browser]]></category>
		<category><![CDATA[Flash on iOS]]></category>
		<category><![CDATA[Flash Player]]></category>
		<category><![CDATA[iPhone / iPad]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=826</guid>
		<description><![CDATA[Yesterday a &#8220;tweet&#8221; pointed me to a nice article about ActionScript 3.0 optimization. Most of these techniques are quite common within the ActionScript developer scene but one thing caught my attention: A link to Jackson Dunstans blog post about runtime &#8230; <a href="http://blog.derraab.com/2012/05/06/actionscript-performance-test-for-array-object-vector-literals-and-array-push-vector-push-methods/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Yesterday a &#8220;tweet&#8221; pointed me to a nice <a href="http://active.tutsplus.com/tutorials/actionscript/actionscript-3-0-optimization-a-practical-example/" title="http://active.tutsplus.com/tutorials/actionscript/actionscript-3-0-optimization-a-practical-example/" target="_blank">article about ActionScript 3.0 optimization</a>. Most of these techniques are quite common within the ActionScript developer scene but one thing caught my attention: A link to <a href="http://jacksondunstan.com/articles/1774" title="http://jacksondunstan.com/articles/1774" target="_blank">Jackson Dunstans blog post</a> about runtime performance and the <code>const</code> and <code>final</code> keywords. Since I always tried to use at least final classes I was a little disappointed that my extra work time doesn&#8217;t have any performance benefit at runtime.</p>
<p>Due to that circumstance I was curious about some other common techniques like &#8220;Use Object and Array Literals Whenever Possible&#8221; or &#8220;Add Elements to the End of an Array Without Pushing&#8221;. I wanted to check performance benefits for myself just to make sure it&#8217;s worth the effort. So I wrote a little test script:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> result : <span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;Test playerType: &quot;</span> + <span style="color: #0066CC;">Capabilities</span>.<span style="color: #0066CC;">playerType</span> + <span style="color: #ff0000;">&quot; version: &quot;</span> + <span style="color: #0066CC;">Capabilities</span>.<span style="color: #0066CC;">version</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>,
    i : <span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">0</span>,
    c : <span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">1000000</span>,
    <span style="color: #0066CC;">array</span> : <span style="color: #0066CC;">Array</span>,
    <span style="color: #0066CC;">object</span> : <span style="color: #0066CC;">Object</span>,
    vectorInt : Vector.<span style="color: #66cc66;">&lt;</span>int<span style="color: #66cc66;">&gt;</span>,
    startTime : <span style="color: #0066CC;">int</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #0066CC;">object</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: object = new Object()             -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #0066CC;">object</span> = <span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: object = {}                       -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #0066CC;">array</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: array = new Array()               -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #0066CC;">array</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: array = []                        -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> vectorInt = <span style="color: #000000; font-weight: bold;">new</span> Vector.<span style="color: #66cc66;">&lt;</span>int<span style="color: #66cc66;">&gt;</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: vectorInt = new Vector.&lt;int&gt;()    -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> vectorInt = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #66cc66;">&lt;</span>int<span style="color: #66cc66;">&gt;</span><span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: vectorInt = new &lt;int&gt;[]           -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #0066CC;">array</span>.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span> i <span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: array.push( i )                   -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #0066CC;">array</span><span style="color: #66cc66;">&#91;</span> <span style="color: #0066CC;">array</span>.<span style="color: #0066CC;">length</span> <span style="color: #66cc66;">&#93;</span> = i; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: array[ array.length ] = i         -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> vectorInt.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span> i <span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: vectorInt.push( i )               -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
startTime = <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> vectorInt<span style="color: #66cc66;">&#91;</span> vectorInt.<span style="color: #0066CC;">length</span> <span style="color: #66cc66;">&#93;</span> = i; <span style="color: #66cc66;">&#125;</span>
result += c + <span style="color: #ff0000;">&quot; times: vectorInt[ vectorInt.length ] = i -&gt; duration: &quot;</span> + <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">getTimer</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> - startTime <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">textFormat</span> : <span style="color: #0066CC;">TextFormat</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextFormat</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #0066CC;">textFormat</span>.<span style="color: #0066CC;">font</span> = <span style="color: #ff0000;">&quot;Courier&quot;</span>;
    <span style="color: #0066CC;">textFormat</span>.<span style="color: #0066CC;">size</span> = <span style="color: #cc66cc;">14</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">textField</span> : <span style="color: #0066CC;">TextField</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextField</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #0066CC;">textField</span>.<span style="color: #0066CC;">autoSize</span> = TextFieldAutoSize.<span style="color: #0066CC;">LEFT</span>;
    <span style="color: #0066CC;">textField</span>.<span style="color: #0066CC;">background</span> = <span style="color: #000000; font-weight: bold;">true</span>;
    <span style="color: #0066CC;">textField</span>.<span style="color: #0066CC;">backgroundColor</span> = 0xFFFFFF;
    <span style="color: #0066CC;">textField</span>.<span style="color: #006600;">defaultTextFormat</span> = <span style="color: #0066CC;">textFormat</span>;
    <span style="color: #0066CC;">textField</span>.<span style="color: #0066CC;">multiline</span> = <span style="color: #000000; font-weight: bold;">true</span>;
    <span style="color: #0066CC;">textField</span>.<span style="color: #0066CC;">text</span> = result;
&nbsp;
addChild<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">textField</span> <span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>It turns out that the benefits differ greatly on platform and player type but basically it&#8217;s always a good idea to avoid using the <code>.push</code> methods and <code>new</code> keyword. While there&#8217;s almost no speed difference in Flash Players and Plug-ins, the debug versions are really slow. And check out the blazing fast object creation with AIR on iOS! Or is this a compiler optimization? Here my results:</p>
<p><code><br />
<strong>Flash CS 5 publish</strong><br />
Test playerType: External version: MAC 10,1,52,14</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 246</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: 427</td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: <strong>1288</strong></td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 339</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 586</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 596</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 134</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 137</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 113</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 114</td>
</tr>
</table>
<p></code></p>
<p><code><br />
<strong>Flash Player Debugger.app</strong><br />
Test playerType: StandAlone version: MAC 11,1,102,62</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 179</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: 311</td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: <strong>1072</strong></td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 313</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 397</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 402</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 118</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 108</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 111</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 89</td>
</tr>
</table>
<p></code></p>
<p><code><br />
<strong>Flash Player.app</strong><br />
Test playerType: StandAlone version: MAC 11,1,102,62</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 127</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: 183</td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: 227</td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 189</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 215</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 218</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 72</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 62</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 61</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 42</td>
</tr>
</table>
<p></code></p>
<p><code><br />
<strong>Browser Debug Plug-in (Safari)</strong><br />
Test playerType: PlugIn version: MAC 11,1,102,62</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 157</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: 249</td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: <strong>1015</strong></td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 293</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 281</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 282</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 124</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 117</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 124</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 94</td>
</tr>
</table>
<p></code></p>
<p><code><br />
<strong>Browser Plug-in (Google Chrome)</strong><br />
Test playerType: PlugIn version: MAC 11,2,202,235</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 147</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: 146</td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: 237</td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 224</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 257</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 266</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 54</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 61</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 70</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 51</td>
</tr>
</table>
<p></code></p>
<p><code><br />
<strong>AIR SDK 3.2</strong><br />
Test playerType: Desktop version: MAC 11,2,202,223</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 274</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: 243</td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: <strong>1344</strong></td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 379</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 431</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 426</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 135</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 136</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 153</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 74</td>
</tr>
</table>
<p></code></p>
<p><code><br />
<strong>iOS (iPad 3) debug interpreter</strong><br />
Test playerType: StandAlone version: MAC 11,1,102,62</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 4707</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: 2033</td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: <strong>22191</strong></td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 2993</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 10235</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 10156</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 1728</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 1670</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 2056</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 1951</td>
</tr>
</table>
<p></code></p>
<p><code><br />
<strong>iOS (iPad 3) ad-hoc</strong><br />
Test playerType: Desktop version: IOS 11,2,202,223</p>
<table>
<tr>
<td>1000000 times: object = new Object()</td>
<td>-> duration: 1224</td>
</tr>
<tr>
<td>1000000 times: object = {}</td>
<td>-> duration: <strong>0 !!!</strong></td>
</tr>
<tr>
<td>1000000 times: array = new Array()</td>
<td>-> duration: 5886</td>
</tr>
<tr>
<td>1000000 times: array = []</td>
<td>-> duration: 1048</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new Vector.<int>()</td>
<td>-> duration: 2737</td>
</tr>
<tr>
<td>1000000 times: vectorInt = new <int>[]</td>
<td>-> duration: 2784</td>
</tr>
<tr>
<td>1000000 times: array.push( i )</td>
<td>-> duration: 2043</td>
</tr>
<tr>
<td>1000000 times: array[ array.length ] = i</td>
<td>-> duration: 234</td>
</tr>
<tr>
<td>1000000 times: vectorInt.push( i )</td>
<td>-> duration: 1524</td>
</tr>
<tr>
<td>1000000 times: vectorInt[ vectorInt.length ] = i</td>
<td>-> duration: 643</td>
</tr>
</table>
<p></code></p>
<p>Always worth reading: <a href="http://gskinner.com/talks/quick/" title="http://gskinner.com/talks/quick/" target="_blank">http://gskinner.com/talks/quick/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2012/05/06/actionscript-performance-test-for-array-object-vector-literals-and-array-push-vector-push-methods/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>My little Flash library cleanup script</title>
		<link>http://blog.derraab.com/2012/05/04/my-little-flash-library-cleanup-script/</link>
		<comments>http://blog.derraab.com/2012/05/04/my-little-flash-library-cleanup-script/#comments</comments>
		<pubDate>Fri, 04 May 2012 14:52:46 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[JSFL]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=818</guid>
		<description><![CDATA[Just save this little code as a .jsfl file: function editItem&#40; lib, item &#41; &#123; var success = true, linkageIdentifier = item.linkageIdentifier, itemType = item.itemType, path = &#91;&#93;; &#160; // separate export symbols from assets path.push&#40; &#40; linkageIdentifier &#41; ? &#8230; <a href="http://blog.derraab.com/2012/05/04/my-little-flash-library-cleanup-script/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Just save this little code as a .jsfl file:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> editItem<span style="color: #009900;">&#40;</span> lib<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> success <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
        linkageIdentifier <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">linkageIdentifier</span><span style="color: #339933;">,</span>
        itemType <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">itemType</span><span style="color: #339933;">,</span>
        path <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// separate export symbols from assets</span>
    path.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span> linkageIdentifier <span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;_export&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;_asset&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// don't touch existing folders</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> itemType <span style="color: #339933;">!==</span> <span style="color: #3366CC;">&quot;folder&quot;</span> <span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// separate different item types</span>
        path.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span> itemType <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        success <span style="color: #339933;">=</span> libItemMoveToFolder<span style="color: #009900;">&#40;</span> lib<span style="color: #339933;">,</span> path.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;/&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">return</span> success<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> libItemMoveToFolder<span style="color: #009900;">&#40;</span> lib<span style="color: #339933;">,</span> path<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> replace <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    fl.<span style="color: #660066;">outputPanel</span>.<span style="color: #660066;">trace</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;libItemMoveToFolder( &quot;</span> <span style="color: #339933;">+</span> lib <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> path <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> replace <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; ) CALL&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
    <span style="color: #003366; font-weight: bold;">var</span> folderCreated <span style="color: #339933;">=</span> lib.<span style="color: #660066;">newFolder</span><span style="color: #009900;">&#40;</span> path <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
        success <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> folderCreated <span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// Can't move symbol names with empty space</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot; &quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// But even this doesn't work - so avoid spaces in item names!</span>
            <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot; &quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        success <span style="color: #339933;">=</span> lib.<span style="color: #660066;">moveToFolder</span><span style="color: #009900;">&#40;</span> path<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span><span style="color: #339933;">,</span> replace <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span> success <span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            fl.<span style="color: #660066;">outputPanel</span>.<span style="color: #660066;">trace</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;libItemMoveToFolder( &quot;</span> <span style="color: #339933;">+</span> lib <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> path <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> replace <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; ) Error Can't move item!&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">else</span>
    <span style="color: #009900;">&#123;</span>
        fl.<span style="color: #660066;">outputPanel</span>.<span style="color: #660066;">trace</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;libItemMoveToFolder( &quot;</span> <span style="color: #339933;">+</span> lib <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> path <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> replace <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; ) Error Can't create folder!&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">return</span> success<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> iterateAllItems<span style="color: #009900;">&#40;</span> lib <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> items <span style="color: #339933;">=</span> lib.<span style="color: #660066;">items</span><span style="color: #339933;">,</span>
        <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span>
        c <span style="color: #339933;">=</span> items.<span style="color: #660066;">length</span><span style="color: #339933;">,</span>
        i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
        success<span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> i<span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> c<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">=</span> items<span style="color: #009900;">&#91;</span> i <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            success <span style="color: #339933;">=</span> editItem<span style="color: #009900;">&#40;</span> lib<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span> success <span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Select .fla</span>
<span style="color: #003366; font-weight: bold;">var</span> avatarFLASource <span style="color: #339933;">=</span> fl.<span style="color: #660066;">browseForFileURL</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;open&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> avatarFLASource <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// Open .fla</span>
    <span style="color: #003366; font-weight: bold;">var</span> doc <span style="color: #339933;">=</span> fl.<span style="color: #660066;">openDocument</span><span style="color: #009900;">&#40;</span> avatarFLASource <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> doc <span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> lib <span style="color: #339933;">=</span> doc.<span style="color: #660066;">library</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> lib <span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            iterateAllItems<span style="color: #009900;">&#40;</span> lib <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>If you use empty spaces within your item names these items won&#8217;t move at all. I was to busy fixing this issue but maybe you know how to solve this little problem?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2012/05/04/my-little-flash-library-cleanup-script/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Avoid iFrame content clipping with CSS transform on iOS</title>
		<link>http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/</link>
		<comments>http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/#comments</comments>
		<pubDate>Mon, 02 Apr 2012 22:57:25 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[iPhone / iPad]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=793</guid>
		<description><![CDATA[The HTML(5) version of our SCORM based e-learning runtime heavily uses i-frames as template containers. This architecture gives a lot of flexibility but since customers mainly request iPad support we where very unhappy with Safari&#8217;s rendering capabilities on iOS. Of &#8230; <a href="http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>The HTML(5) version of our SCORM based e-learning runtime heavily uses i-frames as template containers. This architecture gives a lot of flexibility but since customers mainly request iPad support we where very unhappy with Safari&#8217;s rendering capabilities on iOS. Of course we use CSS transform to get the best animation performance on mobile devices, but in Apple&#8217;s mobile browser you&#8217;ll likely see huge clipping rectangles during hardware accelerated transitions.</p>
<p>There was not much information about that issue online but at least <a href="http://stackoverflow.com/questions/4496242/ios-safari-clipping-of-iframe-when-using-transform3d" target="_blank">this entry on stackoverflow</a> suggested there is not much you can do. Well, it took a lot of trail an error testing time but finally we nailed it. The solution is quite simple:</p>
<p>Whenever you use CSS transform with i-frames or it&#8217;s parents you also need to apply a basic CSS transform to the body tag of your i-frame content. That&#8217;s it. You can also use other contents within the loaded frame HTML page but the body tag seems to be the perfect target.</p>
<p>So this is a little JavaScript code snipped:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Reference to your iFrame HTML element</span>
<span style="color: #003366; font-weight: bold;">var</span> iFrameElement <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;yourIFrameID&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Avoid clipping by applying simple css transfrom3D to the iframe content itself</span>
$<span style="color: #009900;">&#40;</span> iFrameElement.<span style="color: #660066;">contentWindow</span>.<span style="color: #660066;">document</span>.<span style="color: #660066;">body</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;-webkit-transform&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;translate3d(0,0,0)&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Start your iFrame transition (from a visible position)</span>
$<span style="color: #009900;">&#40;</span> iFrameElement <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;-webkit-transform&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;translate3d(-1000px,0,0)&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><strong>UPDATE: Make sure you start from a visible position!</strong></p>
<p>Don&#8217;t forget to remove CSS transform after your animation is done:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Don't forget to reset after your transition has finished!</span>
$<span style="color: #009900;">&#40;</span> iFrameElement.<span style="color: #660066;">contentWindow</span>.<span style="color: #660066;">document</span>.<span style="color: #660066;">body</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;-webkit-transform&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;none&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>I suggest to use &#8220;none&#8221; as the default value. We sometimes experienced weird behavior using an empty string&#8230;</p>
<p>Have fun coding!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Removing comments in CSS, HTML and ECMAScript (JavaScript)</title>
		<link>http://blog.derraab.com/2011/11/26/removing-comments-in-css-html-and-ecmascript-javascript/</link>
		<comments>http://blog.derraab.com/2011/11/26/removing-comments-in-css-html-and-ecmascript-javascript/#comments</comments>
		<pubDate>Sat, 26 Nov 2011 18:31:36 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=767</guid>
		<description><![CDATA[While working on an Adobe AIR based source code editor I was looking for an easy way to remove comments from different kind of source codes. What first seemed like an easy regular expression turned out to be much more &#8230; <a href="http://blog.derraab.com/2011/11/26/removing-comments-in-css-html-and-ecmascript-javascript/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>While working on an Adobe AIR based source code editor I was looking for an easy way to remove comments from different kind of source codes. What first seemed like an easy regular expression turned out to be much more complex because comment pre- and suffixes can also occur in string literals or regular expressions and our old friend Internet Explorer allows <a href="http://en.wikipedia.org/wiki/Conditional_Comments" title="http://en.wikipedia.org/wiki/Conditional_Comments" target="_blank"><code>HTML</code> conditional comments and <code>JavaScript</code> conditional compilation</a>. Great.</p>
<p>First I had a look at <a href="http://developer.yahoo.com/yui/compressor/" title="http://developer.yahoo.com/yui/compressor/" target="_blank"><code>YUICompressor</code>s</a> source code and <a href="http://code.google.com/intl/en-EN/speed/page-speed/" title="http://code.google.com/intl/en-EN/speed/page-speed/" target="_blank">Google Page Speed</a> but then I decided to port a script for <a href="http://james.padolsey.com/javascript/removing-comments-in-javascript" title="http://james.padolsey.com/javascript/removing-comments-in-javascript" target="_blank">removing <code>JavaScript</code> comments created by James Padolsey</a>.</p>
<p>I just improved the recognition for regular expressions a little and since this code should work with all <code>ECMAScript</code> based source codes I named my class <code>ECMAScriptParser</code> instead of <code>JavaScriptParser</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package de.<span style="color: #006600;">superclass</span>.<span style="color: #006600;">parser</span>
<span style="color: #66cc66;">&#123;</span>
    <span style="color: #808080; font-style: italic;">/**
     * @author Markus Raab (superclass.de | blog.derRaab.com)
     */</span>
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ECMAScriptParser
    <span style="color: #66cc66;">&#123;</span>
        <span style="color: #808080; font-style: italic;">/**
         * Removes inline and block comments from an ECMAScript source string. 
         * 
         * This is a port of James Padolsey     with an slightly improved RegExp recognition.
         * @see: http://james.padolsey.com/javascript/removing-comments-in-javascript
         * 
         * @param ecmaScript        ECMAScript source string
         * @param removeCondComp    Optional (default=false) - Whether to remove Internet Explorers JavasScript conditional compilation comments or not.   
         * @return                    ECMAScript source string without comments
         */</span>
        <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> removeComments<span style="color: #66cc66;">&#40;</span> ecmaScript : <span style="color: #0066CC;">String</span>, removeCondComp : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span> <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">String</span>
        <span style="color: #66cc66;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">var</span> modeSingleQuote        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeDoubleQuote        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeRegExp            : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeBlockComment    : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeLineComment        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeCondComp        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>; 
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> vector : Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span> = Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'__'</span> + ecmaScript + <span style="color: #ff0000;">'__'</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">split</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">''</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
                vector.<span style="color: #006600;">fixed</span> = <span style="color: #000000; font-weight: bold;">true</span>;
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> c : <span style="color: #0066CC;">int</span> = vector.<span style="color: #0066CC;">length</span>;
&nbsp;
            <span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">var</span> i : <span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span>
            <span style="color: #66cc66;">&#123;</span>
                <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">string</span> : <span style="color: #0066CC;">String</span> = vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span>;
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeRegExp <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeRegExp = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeSingleQuote <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">&quot;'&quot;</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeSingleQuote = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeDoubleQuote <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'&quot;'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeDoubleQuote = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeBlockComment <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                        modeBlockComment = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeLineComment<span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #0066CC;">string</span> = vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span>;
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #66cc66;">||</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\r</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeLineComment = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeCondComp <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'@'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&amp;&amp;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeCondComp = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'&quot;'</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    modeDoubleQuote = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">&quot;'&quot;</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    modeSingleQuote = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">!</span> removeCondComp <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'@'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeCondComp = <span style="color: #000000; font-weight: bold;">true</span>;
                        <span style="color: #b1b100;">continue</span>;
                    <span style="color: #66cc66;">&#125;</span>
&nbsp;
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
&nbsp;
                        modeBlockComment = <span style="color: #000000; font-weight: bold;">true</span>;
                        <span style="color: #b1b100;">continue</span>;
                    <span style="color: #66cc66;">&#125;</span>
&nbsp;
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                        modeLineComment = <span style="color: #000000; font-weight: bold;">true</span>;
                        <span style="color: #b1b100;">continue</span>;
                    <span style="color: #66cc66;">&#125;</span>
&nbsp;
                    <span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">var</span> k : <span style="color: #0066CC;">int</span> = i - <span style="color: #cc66cc;">1</span>; <span style="color: #000000; font-weight: bold;">true</span>; k-- <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        <span style="color: #0066CC;">string</span> = vector<span style="color: #66cc66;">&#91;</span> k <span style="color: #66cc66;">&#93;</span>;
                        <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">' '</span> <span style="color: #66cc66;">&#41;</span>
                        <span style="color: #66cc66;">&#123;</span>
                            <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'='</span> <span style="color: #66cc66;">&#41;</span>
                            <span style="color: #66cc66;">&#123;</span>
                                modeRegExp = <span style="color: #000000; font-weight: bold;">true</span>;
                            <span style="color: #66cc66;">&#125;</span>
                            <span style="color: #b1b100;">break</span>;
                        <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #66cc66;">&#125;</span>
                <span style="color: #66cc66;">&#125;</span>
            <span style="color: #66cc66;">&#125;</span>
            <span style="color: #b1b100;">return</span> vector.<span style="color: #0066CC;">join</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">''</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">slice</span><span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">2</span>, -<span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#41;</span>;
        <span style="color: #66cc66;">&#125;</span>
    <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Allright &#8211; CSS doesn&#8217;t allow inline or conditional comments so I removed this script functionality and created a <code>CSSParser</code> class:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package de.<span style="color: #006600;">superclass</span>.<span style="color: #006600;">parser</span>
<span style="color: #66cc66;">&#123;</span>
    <span style="color: #808080; font-style: italic;">/**
     * @author Markus Raab (superclass.de | blog.derRaab.com)
     */</span>
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> CSSParser
    <span style="color: #66cc66;">&#123;</span>
        <span style="color: #808080; font-style: italic;">/**
         * Removes comments from a CSS string. 
         * 
         * This is a shrinked port of James Padolseys script.
         * @see: http://james.padolsey.com/javascript/removing-comments-in-javascript
         * 
         * @param css                CSS string
         * @return                    CSS string without comments
         */</span>
        <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> removeComments<span style="color: #66cc66;">&#40;</span> css : <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">String</span>
        <span style="color: #66cc66;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">var</span> modeSingleQuote        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeDoubleQuote        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeBlockComment    : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> vector : Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span> = Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'__'</span> + css + <span style="color: #ff0000;">'__'</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">split</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">''</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
                vector.<span style="color: #006600;">fixed</span> = <span style="color: #000000; font-weight: bold;">true</span>;
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> c : <span style="color: #0066CC;">int</span> = vector.<span style="color: #0066CC;">length</span>;
&nbsp;
            <span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">var</span> i : <span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span>
            <span style="color: #66cc66;">&#123;</span>
                <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">string</span> : <span style="color: #0066CC;">String</span> = vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span>;
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeSingleQuote <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">&quot;'&quot;</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeSingleQuote = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeDoubleQuote <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'&quot;'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeDoubleQuote = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeBlockComment <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                        modeBlockComment = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'&quot;'</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    modeDoubleQuote = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">&quot;'&quot;</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    modeSingleQuote = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
&nbsp;
                        modeBlockComment = <span style="color: #000000; font-weight: bold;">true</span>;
                        <span style="color: #b1b100;">continue</span>;
                    <span style="color: #66cc66;">&#125;</span>
                <span style="color: #66cc66;">&#125;</span>
            <span style="color: #66cc66;">&#125;</span>
            <span style="color: #b1b100;">return</span> vector.<span style="color: #0066CC;">join</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">''</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">slice</span><span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">2</span>, -<span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#41;</span>;
        <span style="color: #66cc66;">&#125;</span>
    <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Good. Lastly I extended the code to remove all comments within <code>HTML</code> source code, which can also contain <code>JavaScript</code> and of course <code>CSS</code>. This is the <code>HTMLParser</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package de.<span style="color: #006600;">superclass</span>.<span style="color: #006600;">parser</span>
<span style="color: #66cc66;">&#123;</span>
    <span style="color: #808080; font-style: italic;">/**
     * @author Markus Raab (superclass.de | blog.derRaab.com)
     */</span>
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> HTMLParser
    <span style="color: #66cc66;">&#123;</span>
        <span style="color: #808080; font-style: italic;">/**
         * Removes all HTML, CSS and ECMAScript comments from a HTML string.
         * 
         * This is an extended port of James Padolseys script with an improved RegExp recognition.
         * @see: http://james.padolsey.com/javascript/removing-comments-in-javascript
         * 
         * @param html                        HTML string
         * @param removeHTMLCondComment        Optional (default=false) - Whether to remove Internet Explorers HTML conditional comments or not.
         * @param removeJSCondComp            Optional (default=false) - Whether to remove Internet Explorers JavasScript conditional compilation comments or not.
         * @return                            HTML string without comments
         */</span>
        <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> removeComments<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">html</span> : <span style="color: #0066CC;">String</span>, removeHTMLCondComment : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>, removeJSCondComp : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span> <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">String</span>
        <span style="color: #66cc66;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">var</span> modeSingleQuote        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeDoubleQuote        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeRegExp            : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeBlockComment    : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeLineComment        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> modeJSCondComp        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> modeHTMLComment        : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
            <span style="color: #000000; font-weight: bold;">var</span> modeHTMLCondComment    : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> vector : Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span> = Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'__'</span> + <span style="color: #0066CC;">html</span> + <span style="color: #ff0000;">'__'</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">split</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">''</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
                vector.<span style="color: #006600;">fixed</span> = <span style="color: #000000; font-weight: bold;">true</span>;
&nbsp;
            <span style="color: #000000; font-weight: bold;">var</span> c : <span style="color: #0066CC;">int</span> = vector.<span style="color: #0066CC;">length</span>;
&nbsp;
            <span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">var</span> i : <span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> c; i++ <span style="color: #66cc66;">&#41;</span>
            <span style="color: #66cc66;">&#123;</span>
                <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">string</span> : <span style="color: #0066CC;">String</span> = vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span>;
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeRegExp <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeRegExp = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeSingleQuote <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">&quot;'&quot;</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeSingleQuote = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeDoubleQuote <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'&quot;'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\\</span>'</span><span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeDoubleQuote = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeBlockComment <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'/'</span><span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                        modeBlockComment = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeLineComment<span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #0066CC;">string</span> = vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span>;
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #66cc66;">||</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\r</span>'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeLineComment = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeJSCondComp <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'@'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&amp;&amp;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeJSCondComp = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeHTMLComment <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #808080; font-style: italic;">// --&gt; </span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'-'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'-'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'&gt;'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                        vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
&nbsp;
                        modeHTMLComment = <span style="color: #000000; font-weight: bold;">false</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> modeHTMLCondComment <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'i'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'f'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">']'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">3</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'-'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">4</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'-'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">5</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'&gt;'</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #808080; font-style: italic;">// if]--&gt; </span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeHTMLCondComment = <span style="color: #000000; font-weight: bold;">false</span>;
                        i += <span style="color: #cc66cc;">5</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'&lt;'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'!'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'-'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">3</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'-'</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #808080; font-style: italic;">// &lt;!--</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">!</span> removeHTMLCondComment <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">4</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'['</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">5</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'i'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">6</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'f'</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #808080; font-style: italic;">// &lt;!--[if</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeHTMLCondComment = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">else</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                        modeHTMLComment = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #66cc66;">&#125;</span>
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'&quot;'</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    modeDoubleQuote = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">&quot;'&quot;</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    modeSingleQuote = <span style="color: #000000; font-weight: bold;">true</span>;
                    <span style="color: #b1b100;">continue</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">!</span> removeJSCondComp <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&amp;&amp;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'@'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        modeJSCondComp = <span style="color: #000000; font-weight: bold;">true</span>;
                        <span style="color: #b1b100;">continue</span>;
                    <span style="color: #66cc66;">&#125;</span>
&nbsp;
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'*'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
&nbsp;
                        modeBlockComment = <span style="color: #000000; font-weight: bold;">true</span>;
                        <span style="color: #b1b100;">continue</span>;
                    <span style="color: #66cc66;">&#125;</span>
&nbsp;
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> vector<span style="color: #66cc66;">&#91;</span> i + <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#93;</span> === <span style="color: #ff0000;">'/'</span> <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        vector<span style="color: #66cc66;">&#91;</span> i <span style="color: #66cc66;">&#93;</span> = <span style="color: #ff0000;">''</span>;
                        modeLineComment = <span style="color: #000000; font-weight: bold;">true</span>;
                        <span style="color: #b1b100;">continue</span>;
                    <span style="color: #66cc66;">&#125;</span>
&nbsp;
                    <span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">var</span> k : <span style="color: #0066CC;">int</span> = i - <span style="color: #cc66cc;">1</span>; <span style="color: #000000; font-weight: bold;">true</span>; k-- <span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        <span style="color: #0066CC;">string</span> = vector<span style="color: #66cc66;">&#91;</span> k <span style="color: #66cc66;">&#93;</span>;
                        <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> <span style="color: #66cc66;">!</span>== <span style="color: #ff0000;">' '</span> <span style="color: #66cc66;">&#41;</span>
                        <span style="color: #66cc66;">&#123;</span>
                            <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">string</span> === <span style="color: #ff0000;">'='</span> <span style="color: #66cc66;">&#41;</span>
                            <span style="color: #66cc66;">&#123;</span>
                                modeRegExp = <span style="color: #000000; font-weight: bold;">true</span>;
                            <span style="color: #66cc66;">&#125;</span>
                            <span style="color: #b1b100;">break</span>;
                        <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #66cc66;">&#125;</span>
                <span style="color: #66cc66;">&#125;</span>
            <span style="color: #66cc66;">&#125;</span>
            <span style="color: #b1b100;">return</span> vector.<span style="color: #0066CC;">join</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">''</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">slice</span><span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">2</span>, -<span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#41;</span>;
        <span style="color: #66cc66;">&#125;</span>
    <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Let me know if I made a mistake but it seems to work quite well. Or do you know a good library that already does this kind of optimizations?</p>
<p>Well, that&#8217;s it for now. Have fun coding!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2011/11/26/removing-comments-in-css-html-and-ecmascript-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adobe Tech Summit 2011 Berlin Notes</title>
		<link>http://blog.derraab.com/2011/10/29/adobe-tech-summit-2011-berlin-notes/</link>
		<comments>http://blog.derraab.com/2011/10/29/adobe-tech-summit-2011-berlin-notes/#comments</comments>
		<pubDate>Sat, 29 Oct 2011 17:25:31 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[Conference]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=749</guid>
		<description><![CDATA[Currently I&#8217;m all day long busy learning more about JavaScript, webkit, iOS, web apps, browser differences and all the HTML 5 stuff while porting our SCORM based e-learning runtime. That kept me from following Adobe MAX and all the news &#8230; <a href="http://blog.derraab.com/2011/10/29/adobe-tech-summit-2011-berlin-notes/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Currently I&#8217;m all day long busy learning more about JavaScript, webkit, iOS, web apps, browser differences and all the HTML 5 stuff while porting our SCORM based e-learning runtime. That kept me from following Adobe MAX and all the news regarding it so I took the opportunity to catch up a little bit by spending a whole day at <a href="http://www.adobe.com/de/events/ats11/" title="Adobe Tech Summit 2011 Berlin" target="_blank">Adobe Tech Summit 2011 Berlin (german)</a>. So here I&#8217;m simply sharing my notes:</p>
<p><strong>CSS / HTML / JavaScript</strong></p>
<p>Have a look at <a href="http://labs.adobe.com/technologies/edge/" title="Adobe Edge" target="_blank">Adobe Edge at Adobe Labs</a>. It seems to be a really helpful CSS/JavaScript animation tool and also a good research base for tweaks Adobe uses to be as cross browser as possible. If I understood <a href="http://www.markanders.net/" title="http://www.markanders.net/" target="_blank">Mark Enders</a> right, Adobe Edge currently doesn&#8217;t use CSS <code>transform</code> for animations but for enabling hardware acceleration by just setting <code>transformZ</code>. If that works I&#8217;ll also use this approach.</p>
<p>Check out <a href="http://jquerymobile.com" title="http://jquerymobile.com" target="_blank">jQueryMobile</a> and it&#8217;s virtual mouse events in particular. We had trouble with the <code>onclick</code> event on iOS so I need more information on that.</p>
<p>Just some links worth having a look at (again): <a href="http://www.adobe.com/products/creativecloud.html" title="http://www.adobe.com/products/creativecloud.html" target="_blank">Adobe Creative Cloud</a>,  <a href="https://typekit.com" title="https://typekit.com" target="_blank">Typekit</a>, <a href="http://phonegap.com/" title="http://phonegap.com/" target="_blank">PhoneGap</a>, <a href="http://theexpressiveweb.com/" title="http://theexpressiveweb.com/" target="_blank">The Expressive Web</a>. Follow <a href="http://paulrouget.com/" title="http://paulrouget.com/" target="_blank">Paul Rouget</a> and his work on the upcoming <a href="https://wiki.mozilla.org/DevTools" title="https://wiki.mozilla.org/DevTools" target="_blank">Mozilla Dev Tools</a> and it&#8217;s really great features. </p>
<p><strong>AIR / Flash / Flex</strong></p>
<p>We all know Stage3D and hope to get it on devices soon, but for now we can look forward to Adobe Flex SDK 4.6 which includes a set of touch device components that will help to create touch AIR apps in almost no time. Native extensions for AIR 3.0 will also improve development for touch devices since we can then access every native device functionality. But for now we can at least develop hardware accelerated 2D stuff for the desktop using the <a href="http://www.starling-framework.org/" title="http://www.starling-framework.org/" target="_blank">Starling framework</a></p>
<p>Have fun coding!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2011/10/29/adobe-tech-summit-2011-berlin-notes/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Ilias SCORM 2004 can&#8217;t read timestamp</title>
		<link>http://blog.derraab.com/2011/10/05/ilias-scorm-2004-cant-read-timestamp/</link>
		<comments>http://blog.derraab.com/2011/10/05/ilias-scorm-2004-cant-read-timestamp/#comments</comments>
		<pubDate>Wed, 05 Oct 2011 18:12:13 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[E-Learning]]></category>
		<category><![CDATA[Ilias]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=738</guid>
		<description><![CDATA[If you&#8217;re working with Ilias LMS you might run into this issue as well, so I&#8217;ll share this here. We&#8217;re using SCORM 2004 with it&#8217;s cmi.comments_from_learner but it turned out that it wasn&#8217;t possible to read a previously set timestamp &#8230; <a href="http://blog.derraab.com/2011/10/05/ilias-scorm-2004-cant-read-timestamp/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re working with <a href="http://www.ilias.de/" title="http://www.ilias.de/" target="_blank">Ilias</a> LMS you might run into this issue as well, so I&#8217;ll share this here.</p>
<p>We&#8217;re using SCORM 2004 with it&#8217;s <code>cmi.comments_from_learner</code> but it turned out that it wasn&#8217;t possible to read a previously set <code>timestamp</code> value during the next SCO visit. Did nobody ever read a <code>timestamp</code> again? Anyway, since we strongly needed this functionality I had to figure out where the problem was. After making  definitely sure it wasn&#8217;t our mistake I downloaded a fresh copy of the latest stable Ilias version (4.1.7) and tried to investigate how this system works.</p>
<p>A <code>timestamp</code> value <code>yyyy-mm-ddThh:mm:ss.msZ</code> was stored using MySQL <code>datetime</code> and therefore read back as <code>yyyy-mm-dd hh:mm:ss</code>. Time zone designator and 2 digits accuracy are SCORM 2004 optional, but the missing &#8216;T&#8217; separator killed the data conversion.</p>
<p>So let&#8217;s have a look at the related original JavaScript function:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> setItemValue <span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> dest<span style="color: #339933;">,</span> source<span style="color: #339933;">,</span> destkey<span style="color: #009900;">&#41;</span> 
<span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>source <span style="color: #339933;">&amp;&amp;</span> source.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> 
    <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> d <span style="color: #339933;">=</span> source<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">var</span> temp<span style="color: #339933;">=</span>d<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isNaN<span style="color: #009900;">&#40;</span>parseFloat<span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[A-Za-z]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            d <span style="color: #339933;">=</span> Number<span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>d<span style="color: #339933;">===</span><span style="color: #3366CC;">&quot;true&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            d <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>d<span style="color: #339933;">===</span><span style="color: #3366CC;">&quot;false&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            d <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #006600; font-style: italic;">//special handling for titles - no conversion</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>key <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;title&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            d<span style="color: #339933;">=</span>temp<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        dest<span style="color: #009900;">&#91;</span>destkey <span style="color: #339933;">?</span> destkey <span style="color: #339933;">:</span> key<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> d<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>And here is my temporary fix:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> setItemValue <span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> dest<span style="color: #339933;">,</span> source<span style="color: #339933;">,</span> destkey<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>source <span style="color: #339933;">&amp;&amp;</span> source.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> d <span style="color: #339933;">=</span> String<span style="color: #009900;">&#40;</span> source<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> destkey <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;timestamp&quot;</span> <span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// Fixed timestamp casting to NaN!</span>
            <span style="color: #006600; font-style: italic;">// 26.09.2011 - derRaab - http://blog.derRaab.com</span>
            <span style="color: #006600; font-style: italic;">//</span>
            <span style="color: #006600; font-style: italic;">// a) No conversion</span>
            <span style="color: #006600; font-style: italic;">// b) Ilias delivers date string without 'T': yyyy-mm-dd hh:mm:ss -&gt; yyyy-mm-ddThh:mm:ss</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> d.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">10</span> <span style="color: #339933;">&amp;&amp;</span> d.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">10</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                d <span style="color: #339933;">=</span> d.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot; &quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;T&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> key <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;title&quot;</span> <span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">//special handling for titles - no conversion</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000066; font-weight: bold;">else</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// 26.09.2011 - derRaab - http://blog.derRaab.com</span>
            <span style="color: #006600; font-style: italic;">// Use Number() instead of parseFloat()</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isNaN<span style="color: #009900;">&#40;</span>Number<span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[A-Za-z]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                d <span style="color: #339933;">=</span> Number<span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>d<span style="color: #339933;">===</span><span style="color: #3366CC;">&quot;true&quot;</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                d <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>d<span style="color: #339933;">===</span><span style="color: #3366CC;">&quot;false&quot;</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                d <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
        dest<span style="color: #009900;">&#91;</span>destkey <span style="color: #339933;">?</span> destkey <span style="color: #339933;">:</span> key<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> d<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Please note that I replaced the use of <code>parseFloat()</code> with <code>Number()</code> &#8211; I&#8217;m investigating another problem with the <code>cmi.location characterstring</code> &#8211; but that&#8217;s fixed for now.</p>
<p>I reported these issues to the Ilias development team and they fixed at least the &#8216;T&#8217; separator problem for Ilias 4.2.0:<br />
<a href="http://www.ilias.de/mantis/view.php?id=7846" title="http://www.ilias.de/mantis/view.php?id=7846" target="_blank">http://www.ilias.de/mantis/view.php?id=7846</a><br />
<a href="http://www.ilias.de/mantis/view.php?id=7847" title="http://www.ilias.de/mantis/view.php?id=7847" target="_blank">http://www.ilias.de/mantis/view.php?id=7847</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2011/10/05/ilias-scorm-2004-cant-read-timestamp/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScript development &#8211; libraries and OOP coding conventions</title>
		<link>http://blog.derraab.com/2011/08/30/javascript-development-libraries-and-oop-coding-conventions/</link>
		<comments>http://blog.derraab.com/2011/08/30/javascript-development-libraries-and-oop-coding-conventions/#comments</comments>
		<pubDate>Tue, 30 Aug 2011 15:38:29 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Librarys]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=700</guid>
		<description><![CDATA[As I wrote earlier I&#8217;m currently porting our ActionScript framework to JavaScript, which basically means I&#8217;m diving into JavaScript from and ActionScript developers perspective. Of course I&#8217;m still at the beginning of becoming a good JavaScript developer, but I made &#8230; <a href="http://blog.derraab.com/2011/08/30/javascript-development-libraries-and-oop-coding-conventions/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>As I <a href="http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/" title="http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/" target="_blank">wrote</a> earlier I&#8217;m currently porting our ActionScript framework to JavaScript, which basically means I&#8217;m diving into JavaScript from and ActionScript developers perspective. Of course I&#8217;m still at the beginning of becoming a good JavaScript developer, but I made some progress I&#8217;d like to share.</p>
<p>I&#8217;ll start right away recommending some core libraries:</p>
<ul>
<li><a href="https://github.com/tekool/objs/wiki" title="https://github.com/tekool/objs/wiki" target="_blank">Objs</a> &#8211; Namespaces and class inheritance</li>
<li><a href="https://github.com/tekool/puremvc-javascript-objs" title="https://github.com/tekool/puremvc-javascript-objs" target="_blank">PureMVC Objs</a> &#8211; MVC framework (Objs port)</li>
<li><a href="http://millermedeiros.github.com/js-signals/" title="http://millermedeiros.github.com/js-signals/" target="_blank">JS-Signals</a> &#8211; Event / Messaging system</li>
<li><a href="http://jquery.com/" title="http://jquery.com/" target="_blank">jQuery</a> &#8211; Helps with core functionalities and cross browser issues</li>
</ul>
<p>The existing ActionScript project is based on PureMVC so it was obvious to settle on the same horse, but it wasn&#8217;t easy to decide which PureMVC port! This is a fundamental decision because it also defines how to write OOP JavaScript.</p>
<p><a href="https://github.com/tekool/objs/wiki" title="https://github.com/tekool/objs/wiki" target="_blank">Objs</a> has a clean syntax (and documentation) and after developer <a href="http://www.tekool.net" title="http://www.tekool.net" target="_blank">M. Saunier Frédéric</a> was <a href="http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/comment-page-1/#comment-21696" title="http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/comment-page-1/#comment-21696" target="_blank">kind enough to resolve my license problem</a> I used his lightweight version with one little customization: I changed the constructor function name from <code>initialize()</code> to <code>__construct()</code> as it looks more appropriate to me and I already used some <code>initialize()</code> functions for different tasks.<br />
Changed versions: <a href='http://blog.derraab.com/wp-content/uploads/2011/08/puremvc-objs-2.0.js'>customized puremvc-objs-2.0.js</a> and <a href='http://blog.derraab.com/wp-content/uploads/2011/08/objs-2.0.js'>customized objs-2.0.js</a>.</p>
<p>ActionScript developers probably know Robert Penners AS-Signals but I never implemented it in one of my projects so now I use the concept with <a href="http://millermedeiros.github.com/js-signals/" title="http://millermedeiros.github.com/js-signals/" target="_blank">JS-Signals</a>.</p>
<p>And of course I also use <a href="http://jquery.com/" title="http://jquery.com/" target="_blank">jQuery</a> with it&#8217;s great developer community.</p>
<p>So this is how a &#8220;class&#8221; with applied coding conventions would look like:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * Created by derRaab(); - http://blog.derRaab.com
 */</span>
<span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Namespace vars for minification (only necessary if used multiple times, but you get the idea how to save strings)
     */</span>
    <span style="color: #003366; font-weight: bold;">var</span> nsCom <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;com.&quot;</span><span style="color: #339933;">,</span>
        nsComDerraab <span style="color: #339933;">=</span> nsCom<span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;derraab.&quot;</span><span style="color: #339933;">,</span>
        nsComDerraabExamples <span style="color: #339933;">=</span> nsComDerraab<span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;examples.&quot;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Final class
     */</span>
    ExampleClass<span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Temporary class prototype (separated because that helps with IDE code completion)
     */</span>
    ExampleClassPrototype <span style="color: #339933;">=</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">/**
         * Without leading underscore part of public API.
         *
         * @type {Boolean}
         * @private
         */</span>
        publicVar <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">/**
         * With one leading underscore part of protected API,
         * Use it only in this and it's subclasses.
         *
         * @type {String}
         * @private
         */</span>
        _protectedVar <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">/**
         * With two leading underscores use it only in this class!
         * @type {Number}
         * @private
         */</span>
        __privateVar <span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">/**
         * &lt;code&gt;ExampleClass&lt;/code&gt; constructor (called on instance creation!)
         *
         * @param {Number}    privateValue
         * @param {String}    protectedValue
         * @param {Boolean}    publicValue
         */</span>
        __construct<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> privateValue<span style="color: #339933;">,</span> protectedValue<span style="color: #339933;">,</span> publicValue <span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// Call to superclass constructor (See Objs documentation)</span>
            <span style="color: #006600; font-style: italic;">// ExampleClass.$super.__construct.apply( this, arguments );</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">this</span>.__privateVar    <span style="color: #339933;">=</span> privateValue<span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>._protectedVar    <span style="color: #339933;">=</span> protectedValue<span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">publicVar</span>        <span style="color: #339933;">=</span> publicValue<span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// Use static values</span>
            <span style="color: #000066; font-weight: bold;">this</span>.__privateVar <span style="color: #339933;">=</span> ExampleClass.<span style="color: #660066;">DEFAULT_NUMBER</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">/**
         * Without leading underscore part of public API.
         */</span>
        publicMethod<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">/**
         * With one leading underscore part of protected API,
         * Use it only in this and it's subclasses.
         */</span>
        _protectedMethod<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">/**
         * With two leading underscores use it only in this class!
         */</span>
        __privateMethod<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Let Objs create our &quot;real&quot; class (see Objs documentation for more details
     */</span>
    ExampleClass <span style="color: #339933;">=</span> Objs<span style="color: #009900;">&#40;</span> nsComDerraabExamples <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;ExampleClass&quot;</span><span style="color: #339933;">,</span> ExampleClassPrototype <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Now add some &quot;static&quot; values
     */</span>
    ExampleClass.<span style="color: #660066;">DEFAULT_BOOLEAN</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
    ExampleClass.<span style="color: #660066;">DEFAULT_STRING</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;georgeous&quot;</span><span style="color: #339933;">;</span>
    ExampleClass.<span style="color: #660066;">DEFAULT_NUMBER</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This style is still evolving but I think this is kind of how I like to work.</p>
<p>I suggest you read my last post regarding <a href="http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/" title="http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/" target="_blank">JavaScript library development using ANT and YUICompressor</a> which might help you with project setup and code compression.</p>
<p>And a word to JavaScript IDEs:</p>
<p>I bought <a href="http://www.jetbrains.com/webstorm/" title="http://www.jetbrains.com/webstorm/" target="_blank">WebStorm</a> but it doesn&#8217;t integrate ANT. Luckily I earned a <a href="http://www.jetbrains.com/idea/" title="http://www.jetbrains.com/idea/" target="_blank">IntelliJ IDEA</a> license earlier this year but I&#8217;m not absolutely happy with it. It uses a lot of system resources, needs to set up an Java project and so on. Any hints?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2011/08/30/javascript-development-libraries-and-oop-coding-conventions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScript library development using ANT and YUICompressor</title>
		<link>http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/</link>
		<comments>http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/#comments</comments>
		<pubDate>Thu, 07 Jul 2011 21:08:47 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[ANT]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=653</guid>
		<description><![CDATA[Since I need to port a huge ActionScript project to JavaScript I see myself confronted with different practices of code organization, workspace structures and a lot more JavaScript specific stuff. I&#8217;m used to big, strongly typed ActionScript library development with &#8230; <a href="http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Since I need to port a huge ActionScript project to JavaScript I see myself confronted with different practices of code organization, workspace structures and a lot more JavaScript specific stuff. I&#8217;m used to big, strongly typed ActionScript library development with hundreds of classes and interfaces but I&#8217;m not quite sure how to transfer my programming skills from ActionScript to JavaScript.</p>
<p>After reading loads of informations I think I created an reusable and understandable build process for my JavaScript project. I bet you&#8217;ve already read a lot about <a href="http://developer.yahoo.com/yui/compressor/" title="YUICompressor" target="_blank">YUICompressor</a> and <a href="http://ant.apache.org/" title="ANT" target="_blank">ANT</a> so here you&#8217;ll find just some brief informations.</p>
<p>This is my example workspace with file type <code>src</code> subfolders and even another subfolder within the <code>js</code> directory named like the JavaScript library it contains. All ANT files can be found in <code>src/ant</code>:<br />
&nbsp;<br />
<a href="http://blog.derraab.com/wp-content/uploads/2011/07/JavaScriptTestWorkspace.jpg"><img src="http://blog.derraab.com/wp-content/uploads/2011/07/JavaScriptTestWorkspace.jpg" alt="" title="JavaScriptTestWorkspace" width="191" height="273" class="alignnone size-full wp-image-667" /></a></p>
<p>Now let&#8217;s have a look at <code>system.properties</code>. This file bundles the system specific settings and usually won&#8217;t need changes at all after your initial setup. Only <code>YUI_COMPRESSOR_JAR</code> and <code>YUI_COMPRESSOR_CHARSET</code> will affect the <code>build.xml</code>. I still don&#8217;t know what&#8217;s the correct <code>charset</code>, but my encoding problems might be caused by the editor. I&#8217;ll figure that out later&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="c" style="font-family:monospace;"><span style="color: #339933;">#</span>
<span style="color: #339933;"># SYSTEM PROPERTIES</span>
<span style="color: #339933;">#</span>
&nbsp;
<span style="color: #339933;"># Version number separated for easy changes</span>
YUI_COMPRESSOR_VERSION<span style="color: #339933;">=</span>2.4.6
&nbsp;
<span style="color: #339933;"># Absolut path to YUICompressor home directory</span>
YUI_COMPRESSOR_HOME<span style="color: #339933;">=/</span>Users<span style="color: #339933;">/</span>you<span style="color: #339933;">/</span>...<span style="color: #339933;">/</span>YUICompressor<span style="color: #339933;">/</span>$<span style="color: #009900;">&#123;</span>YUI_COMPRESSOR_VERSION<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #339933;"># Absolute path to JAR file (used in build.xml!)</span>
YUI_COMPRESSOR_JAR<span style="color: #339933;">=</span>$<span style="color: #009900;">&#123;</span>YUI_COMPRESSOR_HOME<span style="color: #009900;">&#125;</span><span style="color: #339933;">/</span>build<span style="color: #339933;">/</span>yuicompressor<span style="color: #339933;">-</span>$<span style="color: #009900;">&#123;</span>YUI_COMPRESSOR_VERSION<span style="color: #009900;">&#125;</span>.<span style="color: #202020;">jar</span>
&nbsp;
<span style="color: #339933;"># Charset used with YUICompressor - MAKE SURE THIS IS CORRECT FOR YOUR SYSTEM!!!</span>
YUI_COMPRESSOR_CHARSET<span style="color: #339933;">=</span>MacRoman
<span style="color: #339933;">#YUI_COMPRESSOR_CHARSET=UTF-8</span>
<span style="color: #339933;">#YUI_COMPRESSOR_CHARSET=ANSI</span>
<span style="color: #339933;">#YUI_COMPRESSOR_CHARSET=ISO-8859-1</span></pre></div></div>

<p>The <code>project.properties</code> currently only contains the basic workspace structure.</p>

<div class="wp_syntax"><div class="code"><pre class="c" style="font-family:monospace;"><span style="color: #339933;">#</span>
<span style="color: #339933;"># PROJECT PROPERTIES</span>
<span style="color: #339933;">#</span>
&nbsp;
<span style="color: #339933;"># Workspace root relative to build.xml</span>
WORKSPACE_ROOT<span style="color: #339933;">=</span>..<span style="color: #339933;">/</span>..
&nbsp;
<span style="color: #339933;"># Main binary directory</span>
BIN_DIR<span style="color: #339933;">=</span>$<span style="color: #009900;">&#123;</span>WORKSPACE_ROOT<span style="color: #009900;">&#125;</span><span style="color: #339933;">/</span>bin
&nbsp;
<span style="color: #339933;"># JavaScript bin directory</span>
BIN_JS_DIR<span style="color: #339933;">=</span>$<span style="color: #009900;">&#123;</span>BIN_DIR<span style="color: #009900;">&#125;</span><span style="color: #339933;">/</span>js
&nbsp;
<span style="color: #339933;"># Main source directory</span>
SRC_DIR<span style="color: #339933;">=</span>$<span style="color: #009900;">&#123;</span>WORKSPACE_ROOT<span style="color: #009900;">&#125;</span><span style="color: #339933;">/</span>src
&nbsp;
<span style="color: #339933;"># JavaScript source directory</span>
SRC_JS_DIR<span style="color: #339933;">=</span>$<span style="color: #009900;">&#123;</span>SRC_DIR<span style="color: #009900;">&#125;</span><span style="color: #339933;">/</span>js</pre></div></div>

<p>Finally there is the main <code>build.xml</code>. I was trying hard to write an understandable documentation. Just follow these steps (also found more detailed within the file):</p>
<ol>
<li>Replace the default library name and prefix with your&#8217;s.</li>
<li>Add your source files.</li>
<li>Choose your browser and html file (works at least with Mac OS X).</li>
<li>Run the ANT task called YOUR_LIBRARY_PREFIX_run().</li>
</ol>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;UTF-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;project</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;JavaScript Project Tasks&quot;</span> <span style="color: #000066;">basedir</span>=<span style="color: #ff0000;">&quot;.&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        Created without much experience ;) by derRaab(); - http://blog.derRaab.com</span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!-- Load external properties --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">file</span>=<span style="color: #ff0000;">&quot;project.properties&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">file</span>=<span style="color: #ff0000;">&quot;system.properties&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        _createWorkspace() - Creates the basic workspace structure..</span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;_createWorkspace()&quot;</span> <span style="color: #000066;">description</span>=<span style="color: #ff0000;">&quot;Creates the basic workspace structure.&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mkdir</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${BIN_CSS_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mkdir</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${BIN_JS_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mkdir</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${SRC_JS_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mkdir</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${SRC_CSS_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        __openBrowser( browserName, targetFile ) - Opens a browser with a specific file.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        This might be Mac OS X specific, so please refer to</span>
<span style="color: #808080; font-style: italic;">        http://www.darronschall.com/weblog/2007/12/launching-firefox-from-ant-on-osx.cfm</span>
<span style="color: #808080; font-style: italic;">        for further informations.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        @param browserName        e.g. 'Firefox', 'Safari', 'Chrome'</span>
<span style="color: #808080; font-style: italic;">        @param targetFile        e.g. 'path/to/index.html'</span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;__openBrowser()&quot;</span> <span style="color: #000066;">description</span>=<span style="color: #ff0000;">&quot;Utility task - Opens a browser with a specific file.&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo</span> <span style="color: #000066;">message</span>=<span style="color: #ff0000;">&quot;__openBrowser( ${browserName}, ${targetFile} )&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;exec</span> <span style="color: #000066;">executable</span>=<span style="color: #ff0000;">&quot;open&quot;</span> <span style="color: #000066;">spawn</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">line</span>=<span style="color: #ff0000;">&quot;-a ${browserName}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">line</span>=<span style="color: #ff0000;">&quot;${targetFile}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/exec<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        _concatenate( inputFileListID, inputFileSetID, outputFile ) - Concatenates a FileSet into one fresh file.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        @param inputFileListID</span>
<span style="color: #808080; font-style: italic;">        @param inputFileSetID</span>
<span style="color: #808080; font-style: italic;">        @param outputFile        e.g. 'path/to/file/name.ext'</span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;__concatenate()&quot;</span> <span style="color: #000066;">description</span>=<span style="color: #ff0000;">&quot;Utility task - Concatenates a FileSet into one fresh file.&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo</span> <span style="color: #000066;">message</span>=<span style="color: #ff0000;">&quot;_concatenate( ${inputFileSetID}, ${outputFile} )&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;delete</span> <span style="color: #000066;">file</span>=<span style="color: #ff0000;">&quot;${outputFile}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;concat</span> <span style="color: #000066;">destfile</span>=<span style="color: #ff0000;">&quot;${outputFile}&quot;</span> <span style="color: #000066;">fixlastline</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;filelist</span> <span style="color: #000066;">refid</span>=<span style="color: #ff0000;">&quot;${inputFileListID}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fileset</span> <span style="color: #000066;">refid</span>=<span style="color: #ff0000;">&quot;${inputFileSetID}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/concat<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        _yuiCompress( workDir, inputFile, outputFile ) - Compresses a single JavaScript file into one fresh file within the same directory.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        @param workDir            e.g. 'path/to/file'</span>
<span style="color: #808080; font-style: italic;">        @param inputFile        e.g. 'name.js'</span>
<span style="color: #808080; font-style: italic;">        @param outputFile        e.g. 'name.min.js'</span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;__compress()&quot;</span> <span style="color: #000066;">description</span>=<span style="color: #ff0000;">&quot;Utility task - Compresses a single JavaScript file into one fresh file within the same directory.&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo</span> <span style="color: #000066;">message</span>=<span style="color: #ff0000;">&quot;_yuiCompress( ${workDir}, ${inputFile}, ${outputFile} )&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;delete</span> <span style="color: #000066;">file</span>=<span style="color: #ff0000;">&quot;${workDir}/${outputFile}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;apply</span> <span style="color: #000066;">dest</span>=<span style="color: #ff0000;">&quot;${workDir}&quot;</span> <span style="color: #000066;">executable</span>=<span style="color: #ff0000;">&quot;java&quot;</span> <span style="color: #000066;">verbose</span>=<span style="color: #ff0000;">&quot;true&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fileset</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${workDir}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;include</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;${inputFile}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fileset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">line</span>=<span style="color: #ff0000;">&quot;-jar&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">path</span>=<span style="color: #ff0000;">&quot;${YUI_COMPRESSOR_JAR}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>    
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;--charset&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${YUI_COMPRESSOR_CHARSET}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;-o&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;targetfile</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mapper</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;glob&quot;</span> <span style="color: #000066;">from</span>=<span style="color: #ff0000;">&quot;${inputFile}&quot;</span> <span style="color: #000066;">to</span>=<span style="color: #ff0000;">&quot;${outputFile}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/apply<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        SETTING UP YOUR BUILD PROCESS:</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        1.    Recognise the default name ('library') and prefix ('LIBRARY_JS') in this default build.xml </span>
<span style="color: #808080; font-style: italic;">        1.    Choose a unique name and prefix for your library.</span>
<span style="color: #808080; font-style: italic;">        2.    Use your editor's case sensitive replace all functionality to change the default values</span>
<span style="color: #808080; font-style: italic;">            ('library'-&gt;'yourLibrary' and 'LIBRARY_JS_'-&gt;'YOUR_LIBRARY_JS_')</span>
<span style="color: #808080; font-style: italic;">            NOTE: You can add multiple libraries to one build.xml</span>
<span style="color: #808080; font-style: italic;">        3.    Add a version number (see ...VERSION) if needed.</span>
<span style="color: #808080; font-style: italic;">        4.    Add files to your file list (see ...FILE_LIST) - OR! add a bunch of files to your file set (see ...FILE_SET)</span>
<span style="color: #808080; font-style: italic;">        5.    Choose your browser (see ...RUN_BROWSER_NAME)</span>
<span style="color: #808080; font-style: italic;">        6    Choose your run file (see ...RUN_FILE_NAME)</span>
&nbsp;
<span style="color: #808080; font-style: italic;">    --&gt;</span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        ...NAME                    Library name used in file system</span>
<span style="color: #808080; font-style: italic;">        ...VERSION                Optional library version suffix e.g. '-1.2.6' or ''</span>
<span style="color: #808080; font-style: italic;">        ...BIN_FILE_DIR            Library binary folder e.g. 'bin/js'</span>
<span style="color: #808080; font-style: italic;">        ...BIN_FILE_NAME        Full file name of concatenated file</span>
<span style="color: #808080; font-style: italic;">        ...BIN_MIN_FILE_NAME    Full file name of minimized file (must be different!)</span>
<span style="color: #808080; font-style: italic;">        ...SRC_DIR                Library source folder e.g. 'src/js/library'</span>
<span style="color: #808080; font-style: italic;">        ...RUN_BROWSER_NAME        Your test browser of choice (Mac OS X only?) e.g. 'Firefox', 'Safari', 'Chrome' </span>
<span style="color: #808080; font-style: italic;">        ...RUN_FILE_NAME        Your test file e.g. 'index.html' </span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_NAME&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;library&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_VERSION&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_BIN_DIR&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${BIN_JS_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_BIN_FILE_NAME&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_NAME}${LIBRARY_JS_VERSION}.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_BIN_MIN_FILE_NAME&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_NAME}${LIBRARY_JS_VERSION}.min.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_SRC_DIR&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${SRC_JS_DIR}/${LIBRARY_JS_NAME}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_RUN_BROWSER_NAME&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;Safari&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_RUN_FILE_NAME&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;index.html&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        ...FILE_LIST    File list used within _concatenate()</span>
<span style="color: #808080; font-style: italic;">        ...FILE_SET        File set used within _concatenate()</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        Important:</span>
&nbsp;
<span style="color: #808080; font-style: italic;">        1.    YUICompressor will use the ...FILE_LIST first and ...FILE_SET afterwards!</span>
<span style="color: #808080; font-style: italic;">            So you can first assign a special file order and then additionally add a bunch of unordered files</span>
<span style="color: #808080; font-style: italic;">        2.    Avoid duplicates since YUICompresser doesn't check if a file was already added!</span>
<span style="color: #808080; font-style: italic;">        3.    It's a good approach to only use one of them and leave the other one empty.</span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;filelist</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_FILE_LIST&quot;</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_SRC_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;file</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;core.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;file</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;more.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;file</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;evenmore.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/filelist<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fileset</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_FILE_SET&quot;</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_SRC_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;exclude</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;**/*.*&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><span style="color: #808080; font-style: italic;">&lt;!-- by default file set is not used! --&gt;</span>
        <span style="color: #808080; font-style: italic;">&lt;!--&lt;include name=&quot;**/*.js&quot;/&gt; this is how you add all js files--&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fileset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">        ..._createWorkspace()    - Creates the library source dir.</span>
<span style="color: #808080; font-style: italic;">        ..._concatenate()        - Concatenates the library.</span>
<span style="color: #808080; font-style: italic;">        ..._compress()            - Compresses the library.</span>
<span style="color: #808080; font-style: italic;">        ..._openBrowser()        - Open's the index.html in your preferred browser.</span>
<span style="color: #808080; font-style: italic;">        ..._run()                - Compresses the library and open's the index.html in your preferred browser.</span>
<span style="color: #808080; font-style: italic;">    --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_createWorkspace()&quot;</span> <span style="color: #000066;">depends</span>=<span style="color: #ff0000;">&quot;_createWorkspace()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mkdir</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_SRC_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_concatenate()&quot;</span> <span style="color: #000066;">depends</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_createWorkspace()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;antcall</span> <span style="color: #000066;">target</span>=<span style="color: #ff0000;">&quot;__concatenate()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;inputFileListID&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_FILE_LIST&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;inputFileSetID&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_FILE_SET&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;outputFile&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_BIN_DIR}/${LIBRARY_JS_BIN_FILE_NAME}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/antcall<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_compress()&quot;</span> <span style="color: #000066;">depends</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_concatenate()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;antcall</span> <span style="color: #000066;">target</span>=<span style="color: #ff0000;">&quot;__compress()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;workDir&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_BIN_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;inputFile&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_BIN_FILE_NAME}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;outputFile&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_BIN_MIN_FILE_NAME}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/antcall<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_openBrowser()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;antcall</span> <span style="color: #000066;">target</span>=<span style="color: #ff0000;">&quot;__openBrowser()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;browserName&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${LIBRARY_JS_RUN_BROWSER_NAME}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;param</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;targetFile&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${basedir}/${BIN_DIR}/${LIBRARY_JS_RUN_FILE_NAME}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/antcall<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_run()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;antcall</span> <span style="color: #000066;">target</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_compress()&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;antcall</span> <span style="color: #000066;">target</span>=<span style="color: #ff0000;">&quot;LIBRARY_JS_openBrowser()&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/project<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Notice that it&#8217;s possible to have multiple libraries within a single <code>build.xml</code>. Simply use different prefixes!</p>
<p>In the end I found most of the core informations at <a href="http://www.samaxes.com/2009/05/combine-and-minimize-javascript-and-css-files-for-faster-loading/" target="_blank">http://www.samaxes.com</a> and <a href="http://www.darronschall.com/weblog/2007/12/launching-firefox-from-ant-on-osx.cfm" target="_blank">http://www.darronschall.com/weblog</a>. Thank you guys! And of course the ANT and YUICompressor manuals accessible through Google <img src='http://blog.derraab.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .</p>
<p>And now I have two question:</p>
<ul>
<li>Will you tell me your preferred editor?</li>
<li>Will you give me a hint according to code organization?</li>
</ul>
<p>Please.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2011/07/07/javascript-library-development-using-ant-and-yuicompressor/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Adobe AIR 2.7: Faster App Performance on iOS</title>
		<link>http://blog.derraab.com/2011/06/15/adobe-air-2-7-faster-app-performance-on-ios/</link>
		<comments>http://blog.derraab.com/2011/06/15/adobe-air-2-7-faster-app-performance-on-ios/#comments</comments>
		<pubDate>Wed, 15 Jun 2011 08:02:12 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash on iOS]]></category>
		<category><![CDATA[iPhone / iPad]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=641</guid>
		<description><![CDATA[Get a big performance boost on iOS using Adobe AIR 2.7 SDK! Adobe&#8217;s current release version includes a number of feature enhancements: Install AIR Runtime to SD (Android) Improved performance on iOS Media Measurement Acoustic Echo Cancellation (Desktop only) Enhanced &#8230; <a href="http://blog.derraab.com/2011/06/15/adobe-air-2-7-faster-app-performance-on-ios/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Get a big performance boost on iOS using <a href="http://www.adobe.com/products/air/sdk/" target="_blank">Adobe AIR 2.7 SDK</a>!</p>
<p>Adobe&#8217;s current release version includes a number of feature enhancements:</p>
<ul>
<li>Install AIR Runtime to SD (Android)</li>
<li><b>Improved performance on iOS</b></li>
<li>Media Measurement</li>
<li>Acoustic Echo Cancellation (Desktop only)</li>
<li>Enhanced HTMLLoader API</li>
<li>Interpreter Mode for iOS</li>
</ul>
<p>Read full details here: <a href="http://blogs.adobe.com/flashruntimereleases/2011/06/14/air-2-7-runtimes-and-sdk-are-now-available/" target="_blank">http://blogs.adobe.com/flashruntimereleases/2011/06/14/air-2-7-runtimes-and-sdk-are-now-available/</a></p>
<p>See the performance:<br />
<iframe width="640" height="390" src="http://www.youtube.com/embed/1R36AosqhlA" frameborder="0" allowfullscreen></iframe></p>
<p>Don&#8217;t know where to start? This guide is still valid: <a href="http://blog.derraab.com/2011/04/04/ios-development-with-air-2-6-using-fdt-and-my-new-friend-ant/" target="_blank">iOS development with AIR 2.6 using FDT and my new friend ANT</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2011/06/15/adobe-air-2-7-faster-app-performance-on-ios/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flex compiler &#8211; application descriptor: invalid application identifier</title>
		<link>http://blog.derraab.com/2011/06/08/flex-compiler-application-descriptor-invalid-application-identifier/</link>
		<comments>http://blog.derraab.com/2011/06/08/flex-compiler-application-descriptor-invalid-application-identifier/#comments</comments>
		<pubDate>Wed, 08 Jun 2011 14:26:40 +0000</pubDate>
		<dc:creator>derRaab</dc:creator>
				<category><![CDATA[AIR]]></category>

		<guid isPermaLink="false">http://blog.derraab.com/?p=631</guid>
		<description><![CDATA[Whenever your Flex compiler prompts &#8220;application descriptor: invalid application identifier&#8220;, you might check your application description XML file. Your application ID might contain underscores (in my case) or other invalid characters. Since I found a hint to the solution only &#8230; <a href="http://blog.derraab.com/2011/06/08/flex-compiler-application-descriptor-invalid-application-identifier/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Whenever your Flex compiler prompts<br />
&#8220;<code>application descriptor: invalid application identifier</code>&#8220;,<br />
you might check your application description XML file. Your application ID might contain underscores (in my case) or other invalid characters. Since I found a hint to the solution only at <a href="http://www.koali.com.au/?p=256" target="_blank">koali.com.au</a>, I think it&#8217;s a good idea to reblog it.</p>
<p>Quote from Adobe livedocs:</p>
<blockquote><p><code><strong>id</strong></code> &#8211; An identifier string unique to the application, known as the application ID. The attribute value is restricted to the following characters:</p>
<ul>
<li>0-9</li>
<li>a-z</li>
<li>A-Z</li>
<li>. (dot)</li>
<li>- (hyphen)</li>
</ul>
<p>The value must contain between 1 to 212 characters. This element is required.</p>
<p>The id string typically uses a dot-separated hierarchy, in alignment with a reversed DNS domain address, a Java package or class name, or an OS X Universal Type Identifier. The DNS-like form is not enforced, and AIR does not create any association between the name and actual DNS domains.</p></blockquote>
<p>More informations about the descriptor file:<br />
<a href="http://livedocs.adobe.com/flex/3/html/help.html?content=dg_part_4_1.html" target="_blank">http://livedocs.adobe.com/flex/3/html/help.html?content=dg_part_4_1.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.derraab.com/2011/06/08/flex-compiler-application-descriptor-invalid-application-identifier/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

