<?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>Hello.World &#187; Web Development</title>
	<atom:link href="http://matthew.delmarters.com/weblog/category/web-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://matthew.delmarters.com</link>
	<description>The Blog of Matthew Delmarter</description>
	<lastBuildDate>Sat, 10 Dec 2011 09:42:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Playing with the toys&#8230; Bootstrap, from Twitter</title>
		<link>http://matthew.delmarters.com/weblog/playing-with-the-toys-bootstrap-from-twitter/</link>
		<comments>http://matthew.delmarters.com/weblog/playing-with-the-toys-bootstrap-from-twitter/#comments</comments>
		<pubDate>Sat, 10 Dec 2011 09:42:39 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Fun]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[bootstrap]]></category>
		<category><![CDATA[chandelle]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/?p=389</guid>
		<description><![CDATA[Recently I discovered Bootstrap from Twitter. As mentioned on the website "Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more." And it is very nice. But you never truly know how good a tool will [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://twitter.github.com/bootstrap/"><img class="alignright" title="Bootstrap, from Twitter" src="http://twitter.github.com/bootstrap/assets/ico/bootstrap-apple-114x114.png" alt="Bootstrap" width="114" height="114" style="margin: 0 0 10px 10px"  /></a>Recently I discovered <a title="Twitter Bootstrap" href="http://twitter.github.com/bootstrap/" target="_blank">Bootstrap from Twitter</a>. As mentioned on the website "Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more." And it is very nice.</p>
<p>But you never truly know how good a tool will be until you try it. In the last few days I have used Bootstrap for two small projects &#8211; one internal project at <a title="SiteHost" href="http://www.sitehost.co.nz" target="_blank">SiteHost</a> where I work, and then again today when I built a webpage for my mothers shop in a couple of hours: <a title="Chandelle Lingerie" href="http://www.chandelle.co.nz" target="_blank">www.chandelle.co.nz</a>.</p>
<p>I have to say I am impressed and will be using Bootstrap again for sure. It does for CSS layouts what jQuery does for JavaScript &#8211; streamlined, elegant, and so easy to use. Highly recommended.</p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/playing-with-the-toys-bootstrap-from-twitter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Zend Studio 8.0.1 Update Released</title>
		<link>http://matthew.delmarters.com/weblog/zend-studio-8-0-1-update-released/</link>
		<comments>http://matthew.delmarters.com/weblog/zend-studio-8-0-1-update-released/#comments</comments>
		<pubDate>Mon, 23 May 2011 22:30:09 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Zend Studio]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/?p=380</guid>
		<description><![CDATA[When I opened Zend Studio this morning there was a prompt to upgrade to the latest version, 8.0.1. But I could not find any details around what has actually changed. I eventually tracked some information down in some zend forum posts &#8211; here is a summary from what I understand: [fixed] In large PHP files [...]]]></description>
			<content:encoded><![CDATA[<p>When I opened Zend Studio this morning there was a prompt to upgrade to the latest version, 8.0.1. But I could not find any details around what has actually changed. I eventually tracked some information down in some zend forum posts &#8211; here is a summary from what I understand:</p>
<p><strong>[fixed]</strong> In large PHP files (over 2000 lines) code parsing was very slow.<br />
<strong>[fixed]</strong> Built-In PHP executables crashed on Warning or Error during local run/debug.<br />
<strong>[fixed]</strong> JavaScript Validator threw Java Null Pointer Exception.<br />
<strong>[fixed]</strong> Error "Unsupported Content Type" occurred when opening a PHP file from the SVN Repositories or CVS Repositories view.<br />
<strong>[fixed]</strong> Using the keyboard shortcut Toggle Breakpoint (Ctrl+Shift+B) resulted in a breakpoint of a wrong type (JS instead of PHP). NB: the fix will work only after workspace reset.<br />
<strong>[fixed]</strong> Hyperlinks in tooltips were not working.<br />
<strong>[fixed]</strong> Code Formatter used to remove the leading backslash in namespaced paths.<br />
<strong>[fixed]</strong> When opening the Project Properties through the main menu (Project | Properties) the Remote Server Support page was not available.<br />
<strong>[fixed]</strong> Refactor/Rename keyboard shortcut (Shift+Alt+R) was not working due to a conflict.</p>
<p><strong>[improvement]</strong> Remote Server Support does not perform full re-scan of the remote resources, unless necessary.<br />
<strong>[improvement]</strong> The Remote Search page has been removed from the Search dialog, because this functionality does not exist.<br />
<strong>[improvement]</strong> Added keyboard shortcuts for file upload/download in Remote Server Support (Shift+Alt+P,U and Shift+Alt+P,D).<br />
<strong>[improvement]</strong> PHP 5.3 is the new workspace default.</p>
<p><strong>[update]</strong> Zend Framework Example Project (Guestbook) has been updated to the latest version from the Zend Framework project site.</p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/zend-studio-8-0-1-update-released/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Missing PuTTY on your Mac? Use the alias command</title>
		<link>http://matthew.delmarters.com/weblog/missing-putty-on-your-mac-use-the-alias-command/</link>
		<comments>http://matthew.delmarters.com/weblog/missing-putty-on-your-mac-use-the-alias-command/#comments</comments>
		<pubDate>Wed, 13 Oct 2010 06:53:01 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[Apple]]></category>
		<category><![CDATA[Web Servers]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/?p=318</guid>
		<description><![CDATA[If you have moved to Mac OS X from Windows you may be like me and miss the convenience of the saved server settings in PuTTY. These settings allowed you to telnet/ssh into your servers without having to remember the IP of each one. There are numerous ways around this of course, but here is [...]]]></description>
			<content:encoded><![CDATA[<p>If you have moved to Mac OS X from Windows you may be like me and miss the convenience of the saved server settings in <a href="http://www.chiark.greenend.org.uk/~sgtatham/putty/">PuTTY</a>. These settings allowed you to telnet/ssh into your servers without having to remember the IP of each one. There are numerous ways around this of course, but here is a tip that may come in handy&#8230;</p>
<p><strong>Use Alias Shortcuts</strong></p>
<p>The 'alias' command allows you to create an alias, or shortcut, to a longer command. For example you could create a shortcut to open TextEdit from the command line like so:</p>
<ul>
<li>Open the Terminal app</li>
<li>Type  the following: 
<div class="VisualSyntax"><code><span style="color: #000000"><br />
alias&nbsp;te='open&nbsp;/Applications/TextEdit.app/'</span><br />
</code></div>
</li>
<li>Press Enter</li>
<li>Now type "te". TextEdit should open</li>
</ul>
<p>So how can we use the alias command to replace the convenience of PuTTY and log into servers easily?</p>
<p>We can create shortcuts for servers that we frequently log into. For example in the Terminal type the following:</p>
<div class="VisualSyntax"><code><span style="color: #000000"><br />
alias&nbsp;myserver='ssh&nbsp;username@xxx.xxx.xxx.xxx'</span><br />
</code></div>
<p>Where:</p>
<ul>
<li>myserver = the name of your alias/shortcut</li>
<li>username = a valid user on the server</li>
<li>xxx.xxx.xxx.xxx = the server IP address</li>
</ul>
<p>Now you can ssh to that server by simply typing "myserver". This should prompt you for your password &#8211; enter that and you're in!</p>
<p><strong>Use .bash_profile to save aliases</strong></p>
<p>At the moment if you close your Terminal, and then re-open it, your aliases will have been forgotten. So how do we tell Terminal to remember them permanently? The trick is to create a .bash_profile file for your Mac user. This file should exist in your Mac home directory. To create this file follow these steps:</p>
<ul>
<li>Open the Terminal app</li>
<li>Type the following:
<div class="VisualSyntax"><code><span style="color: #000000"><br />
vi&nbsp;~/.bash_profile</span><br />
</code></div>
</li>
<li>This will open a new blank file in the "vi" editor</li>
<li>Press "i" once &#8211; this puts the editor into "insert" mode</li>
<li>Put your alias command into the file (same as above) &#8211; paste using Ctrl+V, or type it</li>
<li>Press the Esc key once</li>
<li>Type ":wq" to finish editing the file and save it to disk</li>
<li>Now close your Terminal app, and reopen it. Your alias should now be working.</li>
</ul>
<p><strong>Note:</strong> If you have <a href="http://macromates.com/">TextMate</a> installed (which I highly recommend) then at the command line just type "mate ~/.bash_profile" (instead of using "vi"). This will open a blank file in TextMate. Then type in the alias command as above and save the file. Then close and reopen the Terminal app.</p>
<p>This was just a quick overview for those who can work out the details from the clues above. Even if you do not use aliases to shortcut logging in to servers they are handy to know about.</p>
<p>Happy aliasing!</p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/missing-putty-on-your-mac-use-the-alias-command/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ext.air &#8211; Blurring the line between Adobe AIR and Ext JS</title>
		<link>http://matthew.delmarters.com/weblog/extair-blurring-the-line-between-adobe-air-and-ext-js/</link>
		<comments>http://matthew.delmarters.com/weblog/extair-blurring-the-line-between-adobe-air-and-ext-js/#comments</comments>
		<pubDate>Tue, 02 Dec 2008 19:31:06 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/weblog/extair-blurring-the-line-between-adobe-air-and-ext-js/</guid>
		<description><![CDATA[By now you should be very aware of Adobe AIR which allows Web Developers to use their existing skill-set to develop desktop applications for Windows, OS X and Linux. This means that anybody who knows HTML, JavaScript and CSS can easily start developing desktop applications. And if you add Ext JS to the equation then [...]]]></description>
			<content:encoded><![CDATA[<p>By now you should be very aware of <a href="http://www.adobe.com/devnet/air/">Adobe AIR</a> which allows Web Developers to use their existing skill-set to develop desktop applications for Windows, OS X and Linux. This means that anybody who knows HTML, JavaScript and CSS can easily start developing desktop applications. And if you add <a href="http://extjs.com/">Ext JS</a> to the equation then you get an impressive JavaScript library and whole set of interface widgets that work tightly with Adobe AIR out of the box. Ext JS and Adobe AIR are made for other, and it is good news to hear that Adobe and Ext are officially working together to take things to the next level.</p>
<p>As a result of collaberation between Ext JS and Adobe, several impressive <a href="http://extjs.com/blog/2008/11/24/extplayer-air-and-ext/">enhancements</a> to the Ext.air package were just released. These enhancements allow even better control of AIR and the desktop via easy to use JavaScript calls. </p>
<p>For example to play a music file:</p>
<div class="VisualSyntax"><code><span style="color: #000000"></p>
<p>var&nbsp;mp&nbsp;=&nbsp;new&nbsp;Ext.air.MusicPlayer();<br />
mp.adjustVolume(0.5);<br />
mp.play(url);<br />
</span><br />
</code></div>
<p>Or to tell your application to launch on system startup:</p>
<div class="VisualSyntax"><code><span style="color: #000000"></p>
<p>Ext.air.App.launchOnStartup(true);<br />
</span><br />
</code></div>
<p>Additional enhancements allow you to easily control desktop windowing, video, system notifications and alerts and even the clipboard.</p>
<p>You can learn more about Ext JS <a href="http://extjs.com">here</a>.<br />
You can learn more about Adobe AIR <a href="http://www.adobe.com/devnet/air/">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/extair-blurring-the-line-between-adobe-air-and-ext-js/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Controlling the IE7 &#8220;Shrink to Fit&#8221; print setting using JavaScript</title>
		<link>http://matthew.delmarters.com/weblog/controlling-the-ie7-shrink-to-fit-print-setting-using-javascript/</link>
		<comments>http://matthew.delmarters.com/weblog/controlling-the-ie7-shrink-to-fit-print-setting-using-javascript/#comments</comments>
		<pubDate>Thu, 29 Nov 2007 17:10:05 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/weblog/controlling-the-ie7-shrink-to-fit-print-setting-using-javascript/</guid>
		<description><![CDATA[You may have noticed that printing in Internet Explorer 7 has a new feature &#8211; "Shrink to Fit". In some situations, such as when pages are in an iFrame, "Shrink to Fit" is always applied by default. For general web pages this feature may be appreciated, but in a web application where developers want to [...]]]></description>
			<content:encoded><![CDATA[<p>You may have noticed that printing in Internet Explorer 7 has a new feature &#8211; "Shrink to Fit". In some situations, such as when pages are in an iFrame, "Shrink to Fit" is always applied by default. For general web pages this feature may be appreciated, but in a web application where developers want to control the layout of the page, and perhaps generate reports, we do not appreciate IE7&#8242;s changing the print layout at all.</p>
<p>If you have not been challenged by this behaviour yet, don't worry &#8211; you will! And when you do, here is the solution. </p>
<p>Instead of the typical "print()" command in JavaScript, use:</p>
<div class="VisualSyntax"><code><span style="color: #000000"><br />
document.execCommand('print',&nbsp;false,&nbsp;null);</span><br />
</code></div>
<p>Or if you are wanting to print a document inside an iFrame you can use something like:</p>
<div class="VisualSyntax"><code><span style="color: #000000"><br />
window.frames(0).focus();<br />
window.frames(0).document.execCommand('print',&nbsp;false,&nbsp;null);</span><br />
</code></div>
<p><strong>Note:</strong> This solution is for Internet Explorer 7 only &#8211; I leave it up to you to do the browser detection.<!--5220ed3a369bfca60ab94c2a93618ed1--><!--176f6b0d1f43f5e5281bae79c892d0dc--><!--82c654db0b78919fe578a95ccfc3d08a--><!--128c4852db5e251433172afc16bcf0f3--><!--31afc108356d871bcafc49e234f1279c--><!--2bef7d4c8fa7f5d827baa8a60ef80c0d--><!--cee9393b304f74ed15394a63c5e3fb58--></p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/controlling-the-ie7-shrink-to-fit-print-setting-using-javascript/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Debugging in Zend Studio without Zend Platform</title>
		<link>http://matthew.delmarters.com/weblog/debugging-in-zend-studio-without-zend-platform/</link>
		<comments>http://matthew.delmarters.com/weblog/debugging-in-zend-studio-without-zend-platform/#comments</comments>
		<pubDate>Sun, 03 Jun 2007 17:14:23 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/weblog/debugging-in-zend-studio-without-zend-platform/</guid>
		<description><![CDATA[I have been using Zend Studio for quite a while now as my primary PHP IDE. To get the powerful remote debugging and profiling that comes with the tool you used to have to install Zend Studio Server as well. With the release of version 5.5 however, Zend stopped shipping Studio Server and forced developers [...]]]></description>
			<content:encoded><![CDATA[<p>I have been using <a href="http://www.zend.com/products/zend_studio">Zend Studio</a> for quite a while now as my primary PHP IDE. To get the powerful remote debugging and profiling that comes with the tool you used to have to install Zend Studio Server as well. With the release of version 5.5 however, Zend stopped shipping Studio Server and forced developers to install the Zend Platform instead. This is a commercial tool (free to developers) available from Zend that offers PHP acceleration, caching and other features &#8230; that I don't want! I just want my debugging back, without having to bloat my local server with software I will not use elsewhere &#8211; especially when the Zend Platform does not support APC, which we run on our servers, and it also <a href="http://www.zend.com/forums/index.php?t=msg&#038;th=1712&#038;start=0&#038;S=d4c06ca7f03d24df9d09b3982594bab1">broke my web application</a>.</p>
<p>It turns out that we do not need the Zend Platform at all. As part of the <a href="http://www.eclipse.org/pdt/">PDT Eclipse</a> project Zend has made available a standalone version of their debugger. This can be downloaded from here: <a href="http://downloads.zend.com/pdt/server-debugger/">http://downloads.zend.com/pdt/server-debugger/</a></p>
<p>Then you just need to put the .so or .dll file in the correct location and add a few lines to your PHP.INI file and you are away. Here are the lines I had to add to my PHP.INI, which is running inside a Debian VMWare image. Note the commas separating the IP numbers &#8211; this took me a few goes to work out as the examples showed spaces or forward-slashes which didn't work for me.</p>
<div class="VisualSyntax"><code><span style="color: #000000"></p>
<p>zend_extension=/etc/Zend/ZendDebugger.so<br />
zend_debugger.allow_hosts=192.168.1.3,192.168.220.1,192.168.150.1,127.0.0.1,192.168.220.10<br />
zend_debugger.expose_remotely=always<br />
</span><br />
</code></div>
<p>Why did Zend make this so hard to work out? Reading on different blogs and through the Zend forums highlights that this issue has been a source of frustration for many developers. Grrrr&#8230;<!--b6360c37ce128c21e8f89dccb986105c--><!--77a61b8d1b636718fbc0e614fd1916d9--><!--bbb30c34e3cd791626082cec08ecb991--><!--f0abb8ce342cc87d3e555316da29b942--><!--5823fea1193ebe45b54bd62dc75461b8--><!--dbaceb0de9eb93b3b398424847ca06b0--><!--bbb30c34e3cd791626082cec08ecb991--><!--f0abb8ce342cc87d3e555316da29b942--></p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/debugging-in-zend-studio-without-zend-platform/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google Gears Enables Disconnected Web-Apps</title>
		<link>http://matthew.delmarters.com/weblog/google-gears-enables-disconnected-web-apps/</link>
		<comments>http://matthew.delmarters.com/weblog/google-gears-enables-disconnected-web-apps/#comments</comments>
		<pubDate>Thu, 31 May 2007 10:18:50 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/weblog/google-gears-enables-disconnected-web-apps/</guid>
		<description><![CDATA[Google Gears is an open source browser extension, less than 1Mb in size, that lets developers create web applications that can run offline. There are two main ways the extension can be used &#8211; by embedding the API or runtime software in an application you distribute to end users, or by writing a web application [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://gears.google.com/images/gears_sm.png" align="right" style="padding:10px 0px 10px 20px"><a href="http://gears.google.com">Google Gears</a> is an open source browser extension, less than 1Mb in size, that lets developers create web applications that can run offline. There are two main ways the extension can be used &#8211; by embedding the API or runtime software in an application you distribute to end users, or by writing a web application which makes use of installations of Gears on end-users' computers.</p>
<h4> What problem does it solve?</h4>
<p>Web developers write software for &#8230; the web. For applications that run via a browser that is connected to the Internet. Google Gears will take web applications to the desktop &#8211; enabling Web applications to work offline. A user will not be required to be connected to the Internet to use the application. </p>
<h4>How does it work?</h4>
<p>First of all web applications will need to detect whether or not Google Gears is installed on a user's machine. If Gears is installed, then the application will be able to access the Google Gears APIs from JavaScript code. If Gears isn't installed, the user can be directed to a customized installation page.  </p>
<p>The APIs can then be used to access Google Gears three core features:</p>
<ul>
<li>A <strong>local server</strong>, to cache and serve application resources (HTML, JavaScript, images, etc.) without needing to contact a server.</li>
<li>A <strong>SQLite database</strong>, to store and access data from within the browser.The Database module is used to persistently store an application user's data on the user's computer. Data is stored using the same-origin security policy, meaning that a web application cannot access data outside of its domain. Standard SQL can be used to access the data, and full-text indexing is supported using SQLite's fts2 extension.</li>
<li>A <strong>worker thread pool</strong>, to make web applications more responsive by performing expensive operations in the background. In web browsers a single time-intensive operation, such as I/O or heavy computation, can make the UI unresponsive. The WorkerPool module runs operations in the background, without blocking the UI.</li>
</ul>
<h4>What browsers are supported?</h4>
<p>The final release will run on the following browsers:</p>
<ul>
<li>Apple Mac OS X (10.2 or higher)
<ul>
<li>Firefox 1.5 or higher</li>
<li>Safari</li>
</ul>
</li>
<li>Linux
<ul>
<li>Firefox 1.5 or higher</li>
</ul>
</li>
<li>Microsoft Windows (XP or higher)
<ul>
<li>Firefox 1.5 or higher</li>
<li>Internet Explorer 6 or higher</li>
</ul>
</li>
</ul>
<h4>What next?</h4>
<p>To find out more about this project you can visit the <a href="http://gears.google.com/">Google Gears website</a>. From there you can download Gears and then install some of the sample applications available.</p>
<p>Some developers are already playing with Google Gears and sharing their experience and their plans. For example you can listen to a podcast about <a href="http://ajaxian.com/archives/audible-ajax-episode-21-dojo-offline-on-google-gears">Dojo Offline being ported to Google Gears</a>, or take a look at <a href="http://ajaxian.com/archives/rss-bling-goes-offline-with-google-gears">RSS Bling moving to Google Gears</a>.</p>
<p>This is definitely a project to watch. With Google obviously coordinating with the efforts of popular projects such as <a href="http://dojotoolkit.org/">Dojo</a>, as well as supporting all the major browsers, there are some interesting possibilities opening up for web applications. </p>
<p>Linus Upson, the engineering director at Google, stated that the goal of Google Gears is to "create a single, standardized way to add offline capabilities to Web applications." Google is certainly on the right track &#8230; I'm off to have a play!<!--ac4cf2e1b58575260cb300e9625a09a7--><!--712d13966e88177caa375cc3e9cc9e20--><!--b0e9dbebb4cec9bbf5d5d1d4a8960da5--><!--f137a72f62fd4f509958e3b8a1b978ca--><!--099371a5f0da7713fb062a0e21541f71--><!--74309e3b2cd93dd55f0513e0599439ff--><!--181d22280537807bede44c4051355762--><!--099371a5f0da7713fb062a0e21541f71--><!--74309e3b2cd93dd55f0513e0599439ff--><!--181d22280537807bede44c4051355762--></p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/google-gears-enables-disconnected-web-apps/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Generating Random Sample Data</title>
		<link>http://matthew.delmarters.com/weblog/generating-random-sample-data/</link>
		<comments>http://matthew.delmarters.com/weblog/generating-random-sample-data/#comments</comments>
		<pubDate>Tue, 17 Apr 2007 10:52:33 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[MySQL]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/weblog/generating-random-sample-data/</guid>
		<description><![CDATA[I found a very useful tool today &#8211; the Data Generator. It generates large volumes of random, custom data for use in testing software. The tool is a free download, and can generate data in the following formats: HTML Excel XML CSV SQL There is an online demo available that is limited to 200 results. [...]]]></description>
			<content:encoded><![CDATA[<p>I found a very useful tool today &#8211; the <a href="http://www.benjaminkeen.com/software/data_generator/">Data Generator</a>. It generates large volumes of random, custom data for use in testing software. The tool is a free download, and can generate data in the following formats:</p>
<blockquote>
<ul>
<li>HTML</li>
<li>Excel</li>
<li>XML</li>
<li>CSV</li>
<li>SQL</li>
</ul>
</blockquote>
<p>There is an online demo available that is limited to 200 results. <a href="http://www.benjaminkeen.com/software/data_generator/">Click here</a> to find out more&#8230;<!--d28f225a8a0107210ef11b7e4da6d7c1--><!--5f28e03fe7ad88dd7e25792c4a963cb7--></p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/generating-random-sample-data/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Injecting JavaScript and CSS into Iframes</title>
		<link>http://matthew.delmarters.com/weblog/injecting-javascript-and-css-into-iframes/</link>
		<comments>http://matthew.delmarters.com/weblog/injecting-javascript-and-css-into-iframes/#comments</comments>
		<pubDate>Sat, 14 Apr 2007 13:30:23 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/weblog/injecting-javascript-and-css-into-iframes/</guid>
		<description><![CDATA[Introducing a new technique to allow efficient reuse of JavaScript and CSS &#8211; effectively allowing you to download the code once and then inject it into Iframes. This solution is targeted at Web Applications which commonly use Iframes for complex layouts and to control memory usage in larger apps without moving to the complexity of [...]]]></description>
			<content:encoded><![CDATA[<p><em style="color:#858585">Introducing a new technique to allow efficient reuse of JavaScript and CSS &#8211; effectively allowing you to download the code once and then inject it into Iframes. This solution is targeted at Web Applications which commonly use Iframes for complex layouts and to control memory usage in larger apps without moving to the complexity of a Single Page Interface (SPI). Along the way we summarise and explain other methods available to developers for minimising their code and speeding up the loading time of their application.</em></p>
<p>With the next generation of Web Applications upon us the challenges faced by the average web developer have broadened. Understanding and confronting issues like memory leaks, bandwidth, load times and JavaScript processing time is becoming more of an everyday focus for web developers than ever before. </p>
<p>Fortunately we now have the tools available to help. On the developers machine the <a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer Toolbar</a> and <a href="http://www.getfirebug.com/">Firebug</a> for example are essential. And within the applications themselves we find increased usage of JavaScript libraries such as <a href="http://dojotoolkit.org/">Dojo</a>, <a href="http://jquery.com">jQuery</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/">YUI</a> and widget frameworks like <a href="http://www.extjs.com">Ext</a>, which provide a layer of abstraction and freedom for developers from some of these issues.</p>
<p>The increased usage of JavaScript however brings other challenges. Particularly in the world of Web Applications where the use of Widgets (tabs, grids, menus etc) is more likely, it is not uncommon for the volume of JavaScript and CSS to quickly accumulate from tens to a few hundred kb of code. This is a far cry from ideal, but is also to a certain extent unavoidable if that is the type of application you are supporting. </p>
<p>What can a developer do to minimise this issue? There are several very effective methods that can be explored:</p>
<blockquote>
<p><strong>Compacting Your Code</strong><br />
This is acheived by stripping out comments and unneccesary white-space which can drastically reduce the size of your files &#8211; sometimes cutting them in half. Recommended tools: <a href="http://dean.edwards.name/packer/">Dean Edwards Packer</a> or <a href="http://www.crockford.com/javascript/jsmin.html">Douglas Crockford's JSMin</a>. You could apply the same theory to your CSS as well.</p>
<p><strong>File Compression</strong><br />
Using GZIP or Deflate can drastically reduce the downloaded file size (but should be used wisely). You can read more on this <a href="http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/">here</a>.</p>
<p><strong>Combining Multiple Files</strong><br />
In general browsers download only two or four files in parallel per hostname, depending on the HTTP version of the response and the userâ€™s browser. On top of that it seems that JavaScript files are loaded synchronously and sequentially as they appear in your code. This means that only one JavaScript file can be downloaded at a time &#8211; and each file must be completely downloaded and then interpreted before the next download can begin. Reducing the number of HTTP requests by combining your JavaScript and CSS files into single files will definitely help improve your applications response times. Using <a href="http://www.alistapart.com/articles/sprites/">CSS Sprites</a> to combine your images into a single file and re-use with CSS is also an extension of this principle and is a very effective technique.</p>
<p><strong>Caching</strong><br />
Server-side caching can help speed the up the delivery of page content. Also understanding browser caching and how to control this using file headers can make a difference &#8211; but again should be used wisely.</p>
</blockquote>
<p>These techniques have been around for quite a while now. But this leads me to the real point of this post!</p>
<h4>"Injection" Introduced</h4>
<p>When it comes to the world of Web Applications (as opposed to a "website") where the use of Iframes is more likely, there is another technique that can be explored &#8211; "Code Injection". </p>
<p>I became aware of this technique while trying to interpret some very lengthy posts from <a href="http://extjs.com/forum/showthread.php?t=1201">Choleriker</a> on the <a href="http://extjs.com/forum/showthread.php?t=1201">Ext forums</a>. I thank Choleriker for taking the time to explain the concepts. I thought I would share my interpretation of this technique, as well as provide some examples to see it in action as requested by other developers in the forums.</p>
<p>First of all &#8211; what is this "code injection" that I am referring to? </p>
<p><strong>Explained</strong><br />
In breif, the technique basically involves loading your JavaScript and CSS only once and then re-using it inside any iframes without downloading it again. This is acheived by loading your code "inline" inside the top level page of the application. The top page then makes the JavaScript and CSS available as two variables that can be called from the iframes directly. So the code is passed or "injected" from the top level page into any iframes using JavaScript. </p>
<p><strong>Benefits?</strong><br />
There are several benefits to this technique &#8211; the most obvious being that you only download your JavaScript and CSS once, no additional downloads required. If you normally compress your JavaScript files using GZIP you likely know that there is a performance hit in the client browser to decompress the code before it can be used. This is no longer an issue for the reused code. And there is no longer any concerns with browser caching issues. Another big plus is that the CSS and JavaScript is being loaded as part of your actual page &#8211; i.e. there are no other additional files to download, which will improve the response times as described above. </p>
<p><strong>Downsides?</strong><br />
I guess that the technique requires iframes. In time I guess/hope the principles of the technique may be able to be used in other perhaps more elegant ways that I haven't thought of yet. Another downside is the need to load your JavaScript and CSS inline. This was initially repugnant to me, mainly due to my background in website development. But in an Application is it really a big deal? I have decided it does not outweight the benefits.</p>
<p>Another perceived downside is that you have to get all of your JavaScript and CSS into a format that is loaded inline &#8211; but of course you still want to work with your separate "clean" files as you are used to. <em>This should be viewed as an opportunity!</em> It is likely time to implement a number of techniques as discussed above. My recommended technique is to have a server-side script that does the following:</p>
<blockquote><ul>
<li>Combines the required JavaScript and CSS files</li>
<li>Compacts the code by stripped white-space, comments etc</li>
<li>Caches the output code to a file on the server</li>
<li>Include the code inline using PHP or some other scripting language</li>
</ul>
</blockquote>
<p>I may provide some code for doing this in PHP in the future. In the meantime you might want to look at the <a href="http://rakaz.nl/extra/code/combine">"Combine" script from Niels Leenheer</a> to get started.</p>
<p><strong>Sample Application</strong><br />
So &#8211; how about an example? Click on the image below to see this technique in action. The example is built using <a href="http://www.extjs.com">Ext 1.0 Beta 2</a>. It is a top level page which generates an Ext Layout with panels. The right-hand panel contains an iframe which receives the JavaScript and CSS from the top level page &#8211; it has not downloaded any files except the required images.</p>
<p><a onclick="window.open(this.href,'tree','width=850, height=500, resizable'); return false;" href="/ext_demo.htm" target="_blank"><img src="/images/screen_ext_demo.gif" alt="Launch Demo" border="0"/></a></p>
<p>The secret to this working is the following code in the Top Page:</p>
<div class="VisualSyntax"><code><span style="color: #000000"></p>
<p>&lt;textarea&nbsp;id="StyleProxy"&nbsp;style="display:none;visibility:hidden;"&gt;<br />
//&nbsp;CSS&nbsp;loaded&nbsp;inline&nbsp;here<br />
&lt;/textarea&gt;<br />
<font color='#990000'>&lt;script&nbsp;type="text/javascript"&gt;</font><br />
document.write(['<font color='#990099'>&lt;style&nbsp;type="text/css"&gt;</font>',document.getElementById('StyleProxy').innerHTML,'<font color='#990099'>&lt;/style&gt;</font>'].join('r'));<br />
<font color='#990000'>&lt;/script&gt;</font><br />
&nbsp;<br />
<font color='#990000'>&lt;script&nbsp;type="text/javascript"&nbsp;id="ScriptProxy"&gt;</font><br />
//&nbsp;JavaScript&nbsp;loaded&nbsp;inline&nbsp;here<br />
<font color='#990000'>&lt;/script&gt;</font><br />
&nbsp;<br />
<font color='#990000'>&lt;script&nbsp;type="text/javascript"&gt;</font><br />
//&nbsp;define&nbsp;the&nbsp;variables&nbsp;for&nbsp;storing&nbsp;the&nbsp;JavaScript&nbsp;and&nbsp;CSS<br />
var&nbsp;_SCRIPTS&nbsp;=&nbsp;null;<br />
var&nbsp;_STYLES&nbsp;=&nbsp;null;<br />
&nbsp;<br />
//&nbsp;use&nbsp;jQuery&nbsp;to&nbsp;run&nbsp;the&nbsp;JS&nbsp;once&nbsp;HTML&nbsp;is&nbsp;loaded<br />
$(document).ready(&nbsp;function()<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;place&nbsp;the&nbsp;JavaScript&nbsp;and&nbsp;CSS&nbsp;into&nbsp;the&nbsp;variables&nbsp;for&nbsp;reuse<br />
&nbsp;&nbsp;&nbsp;&nbsp;top.window._SCRIPTS&nbsp;=&nbsp;Ext.get("ScriptProxy").dom.innerHTML.toString();<br />
&nbsp;&nbsp;&nbsp;&nbsp;top.window._STYLES&nbsp;=&nbsp;Ext.get("StyleProxy").dom.innerHTML.toString();<br />
&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;create&nbsp;an&nbsp;iframe&nbsp;and&nbsp;add&nbsp;to&nbsp;the&nbsp;DOM<br />
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;this&nbsp;should&nbsp;be&nbsp;always&nbsp;be&nbsp;done&nbsp;after&nbsp;the&nbsp;variables&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;for&nbsp;the&nbsp;JS&nbsp;and&nbsp;CSS&nbsp;are&nbsp;filled&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;$main_container&nbsp;=&nbsp;Ext.get("iframe_main_container");<br />
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$iframe_nav&nbsp;=&nbsp;Ext.DomHelper.append&nbsp;(<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$main_container,&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"iframe",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"iframeMain",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"iframeMain",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"100%",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"100%",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameborder:&nbsp;"no",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrolling:&nbsp;&nbsp;&nbsp;"no",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"ext_demo_iframe1.htm"<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;);<br />
})<br />
<font color='#990000'>&lt;/script&gt;</font><br />
</span><br />
</code></div>
<p>A look at the files downloaded reveals the benefits &#8211; the iframe had nothing to download but the basic page itself. The JavaScript and CSS were downloaded only once as part of the top page. This top page was a reasonable size &#8211; but Ext is not small, and we can see the GZIP compression kicking in:</p>
<p><img src="/images/screen_ext_usage.gif" alt="File Usage" border="0"/></p>
<p><strong>Conclusion</strong><br />
So &#8211; should you use this technique? That depends on your application and your preference. The objective of this post was to simply introduce a concept that was new to me, and I am sure is new to many others. It is simply another technique to add to a developers toolbox. </p>
<p>PS: I am very interested what other developers think of this technique and what they perceive as the advantages and disadvantages. I also have a question &#8211; does this technique expose any security holes I should be aware of?<!--6d6b1b4de8bc913f0df079ec6f0777e4--><!--4ce4e86f1e5a884e58539db8b3ff8adf--><!--69e3edfea5da861f518fcd4c68d3f4e3--><!--fb0575a8326f533c1d72d763c7ce8190--><!--ef5584235cc46f03a38b863861d2aabb--><!--80ffdada19ce5dd47ca0489b26110ca4--><!--69e3edfea5da861f518fcd4c68d3f4e3--><!--fb0575a8326f533c1d72d763c7ce8190--><!--ef5584235cc46f03a38b863861d2aabb--></p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/injecting-javascript-and-css-into-iframes/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>The &#8220;Month of PHP Bugs&#8221; Begins</title>
		<link>http://matthew.delmarters.com/weblog/the-month-of-php-bugs-begins/</link>
		<comments>http://matthew.delmarters.com/weblog/the-month-of-php-bugs-begins/#comments</comments>
		<pubDate>Fri, 02 Mar 2007 00:14:38 +0000</pubDate>
		<dc:creator>Matthew Delmarter</dc:creator>
				<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://matthew.delmarters.com/weblog/the-month-of-php-bugs-begins/</guid>
		<description><![CDATA[In an initiative to improve the sucurity of PHP, experts from the Hardened PHP Project have launched the "Month of PHP Bugs". Stefan Esserâ€™s, widely regarded as an authority on PHP security issues, plans to make daily disclosures on buffer overflows, double free vulnerabilities and trivial bypass bugs in PHPâ€™s protection features as part of [...]]]></description>
			<content:encoded><![CDATA[<p>In an initiative to improve the sucurity of PHP, experts from the <a href="http://www.hardened-php.net/">Hardened PHP Project</a> have launched the "<a href="http://www.php-security.org/">Month of PHP Bugs</a>". </p>
<p>Stefan Esserâ€™s, widely regarded as an authority on PHP security issues, plans to make daily disclosures on buffer overflows, double free vulnerabilities and trivial bypass bugs in PHPâ€™s protection features as part of a wider goal â€œto make people and especially the PHP developers aware that bugs in PHP exist.â€</p>
<p>Some of these bugs have already been addressed in PHP 5.2.1. Others are fixed by the <a href="http://www.hardened-php.net/suhosin/index.html">Suhosin patches and extensions</a> from Stefan Esser, which are freely downloadable <a href="http://www.hardened-php.net/suhosin/download.html">here</a>. Others hopefully will be addressed in the very near future by the PHP development team.</p>
<p>To find out more about this initiative visit the <a href="http://www.php-security.org/">PHP Security</a> website.<!--450567f9043516e585826f96e1b49e95--><!--28c7295079149a3eed1bab68f05ca054--></p>
]]></content:encoded>
			<wfw:commentRss>http://matthew.delmarters.com/weblog/the-month-of-php-bugs-begins/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

