<?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>The Hines57 Blog &#187; Javascript</title>
	<atom:link href="http://blog.hines57.com/category/technology/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.hines57.com</link>
	<description>The Hines Family Web Log</description>
	<lastBuildDate>Fri, 23 Sep 2011 17:08:09 +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>Zendframework + Minify</title>
		<link>http://blog.hines57.com/2011/03/13/zendframework-minify/</link>
		<comments>http://blog.hines57.com/2011/03/13/zendframework-minify/#comments</comments>
		<pubDate>Mon, 14 Mar 2011 02:11:51 +0000</pubDate>
		<dc:creator>Bubba</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Zend Framework]]></category>
		<category><![CDATA[Zend Zendframework minify doctrine php github git performance jquery]]></category>

		<guid isPermaLink="false">http://blog.hines57.com/2011/03/13/zendframework-minify/</guid>
		<description><![CDATA[I have had the opportunity over the past year to do some extensive work with Zend Framework as we have been porting our legacy code to said framework, and it ...]]></description>
			<content:encoded><![CDATA[<p><a href="http://photos.hines57.com/images/Zendframework--Minify_12601/image.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px 10px 10px 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" align="left" src="http://photos.hines57.com/images/Zendframework--Minify_12601/image_thumb.png" width="176" height="180"></a></p>
<p>I have had the opportunity over the past year to do some extensive work with <a href="http://framework.zend.com/">Zend Framework</a> as we have been porting our legacy code to said framework, and it has been a lot of fun. It turns out that I very much enjoy the MVC framework, and have had great fun in the implementation. Our primary goal has been supportability and maintainability in moving to the framework, but we aren’t opposed to performance and scalability gains as well.<a href="http://photos.hines57.com/images/Zendframework--Minify_12601/image_3.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 10px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" align="right" src="http://photos.hines57.com/images/Zendframework--Minify_12601/image_thumb_3.png" width="154" height="128"></a></p>
<p>A key factor in the migration to the framework has been, and will continue to be, ensuring that we do not lose any of the scalability and performance that we currently enjoy in the legacy code. There have been a few instances, where porting functionality over to the <a href="http://framework.zend.com/">Zend Framework</a> resulted in immediate performance gains; however, the initial port over tends to perform a little slower, and at that point I roll out my handy performance toolbox and get to measuring and diagnosing to find the needed gains. </p>
<p>I typically discover that I have not fully leveraged the framework, took a shortcut someplace, or (re) wrote the code in an inefficient manner. But every single time I would look, the first thing that jumped out at me was the fact that I was breaking the <a href="http://developer.yahoo.com/performance/index.html#rules">Rules for High Performance Web Sites</a>. If you aren’t familiar, these are a series of best practice statements that have repeatedly shown to improve web page performance. From the time I began this effort last spring, I repeatedly told myself, “I’m going to fix that.”</p>
<p>Particularly because the framework allows for some mighty decent control over CSS and JavaScript additions to the page, it seemed to be a no brainer that we should be able to concatenate and minify the includes, then get the JavaScript to the bottom of the page and the css in the header. It even seemed to me that such functionality would be built right into the framework, I mean, we already have the <a href="http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.headlink">HeadLink</a> and <a href="http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.headscript">HeadScript</a> helpers managing them for us, just a wee bit more effort to get the rest of the way. <a href="http://twitter.com/#!/robhines">I tweeted a few requests</a> for a solution, and then spent a moment <a href="http://lmgtfy.com/?q=zend+framework+javascript+css+minification">researching it via Google</a>. No good. Turns out <a href="http://framework.zend.com/issues/browse/ZF-6031?page=com.atlassian.jira.plugin.system.issuetabpanels%3Aall-tabpanel">Zend Framework doesn’t support this</a>, and there does not appear to be a time set for when they will.</p>
<p>My buddy <a href="http://twitter.com/#!/willathome">WillAtHome</a> happened to mention there was a cool PHP5 project over at <a href="http://code.google.com/">Google Code</a> called <a href="http://code.google.com/p/minify/">minify</a>, that appeared to mostly do what I desired.</p>
<p>&nbsp;<a href="http://photos.hines57.com/images/Zendframework--Minify_12601/image_4.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://photos.hines57.com/images/Zendframework--Minify_12601/image_thumb_4.png" width="433" height="54"></a></p>
<p>So I set about downloading, <a href="http://www.mrclay.org/2008/09/19/minify-21-on-mrclayorg/">following the instructions</a>, and implementing it within the public directory of my framework. It was simple enough to get working, and quite impressive. However, I continued to lack the ability to actually integrate it with Zend Framework. I really wanted <a href="http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.headlink">HeadLink</a> and <a href="http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.headscript">HeadScript</a> to get to know minify up close and personal. It turned out <a href="http://code.google.com/p/minify/issues/detail?id=105">I wasn’t the only one</a>! As I read through <strong>Issue </strong><a href="http://code.google.com/p/minify/issues/detail?id=105"><strong>105</strong></a><strong>: Integration with the Zend Framework</strong> I discovered some excellent progress had been made on introducing the three. However, I didn’t find anything that really met my own needs, and the scripts provided all seemed to require some editing in order to get them working as advertised. I really wanted a drop in solution for <strong><em>any</em></strong> <a href="http://framework.zend.com/">Zend Framework</a> project I might ever work on.</p>
<p>My first thought was to refactor the Minify interface into a ZF Controller, throw the minify libraries in my projects library folder, and then extend <a href="http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.headlink">HeadLink</a> and <a href="http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.headscript">HeadScript</a>. However, the boys contributing to <a href="http://code.google.com/p/minify/issues/detail?id=105">Issue 105</a> were mostly done with the helpers, so I figured that I would just apply my hand to the lowest hanging fruit; I already had minify unzipped (installed) and working. The end result can be found on <a href="https://github.com/">GitHub</a> under <a href="https://github.com/bubba-h57/zf-helpers">my zf-helpers repository</a>.</p>
<ul>
<li><a href="https://github.com/bubba-h57/zf-helpers/blob/master/MinifyHeadLink.php">MinifyHeadLink.php</a></li>
<li><a href="https://github.com/bubba-h57/zf-helpers/blob/master/MinifyHeadScript.php">MinifyHeadScript.php</a></li>
</ul>
<p>The instructions for installing and leveraging the scripts can be found in the Header Comments of each one. Here’s what MinifyHeadScript’s instructions look like:</p>
<blockquote><pre>

<font color="#777777" face="Verdana">/**</font>

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana"> * Helper for setting and retrieving script elements for HTML head section</font>

<font color="#777777" face="Verdana"> * with the added twist of minifying the javascript files. </font>

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana"> * ** PREREQUISITES **</font>

<font color="#777777" face="Verdana"> * This file expects that you have installed minify in ../ZendFramworkProject/Public/min </font>

<font color="#777777" face="Verdana"> * and that it is working. If your location has changed, modify </font>

<font color="#777777" face="Verdana"> * $this-&gt;$_minifyLocation to your current location.</font>

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana"> * ** INSTALLATION **</font>

<font color="#777777" face="Verdana"> * Simply drop this file into your ../ZendFramworkProject/application/views/helpers</font>

<font color="#777777" face="Verdana"> * directory.</font>

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana"> * ** USAGE **</font>

<font color="#777777" face="Verdana"> * In your Layout or View scripts, you can simply call minifyHeadScript</font>

<font color="#777777" face="Verdana"> * in the same way that you used to call headScript. Here is an example:</font>

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana">  echo $this-&gt;minifyHeadScript()</font>

<font color="#777777" face="Verdana">  -&gt;prependFile('http://ajax.googleapis.com/ajax/libs/someObject/2.2/object.js') // 12th	   </font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery.delaytrigger.js') // 11th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/sorttable.js')           // 10th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery.alerts.js')       // 9th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jqModal.js')             // 8th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery.maskedinput.js')  // 7th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery.checkbox.js')     // 6th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery.tablesorter.min.js') // 5th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery.autocomplete.js') // 4th</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery.color.js')        // 3rd</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/jquery-1.3.2.min.js')    // 2nd</font>

<font color="#777777" face="Verdana">	-&gt;prependFile('/js/main.js')                // 1st</font>

<font color="#777777" face="Verdana">	-&gt;appendScript('</font>

<font color="#777777" face="Verdana">		$(document).ready(function() {</font>

<font color="#777777" face="Verdana">		      $(\'#ajaxWait\').ajaxStart(function() {</font>

<font color="#777777" face="Verdana">		      $(this).show();</font>

<font color="#777777" face="Verdana">		    }).ajaxStop(function() {</font>

<font color="#777777" face="Verdana">		      $(this).hide();</font>

<font color="#777777" face="Verdana">                                    })</font><font color="#777777" face="Verdana">	</font>

<font color="#777777" face="Verdana">	                    try { init(); } catch(e) {}</font>

<font color="#777777" face="Verdana">		});                                       // Last</font>

<font color="#777777" face="Verdana">	');</font>

<font color="#777777" face="Verdana"> * Because minify can't do anything with a javascript from some other server, nor</font>

<font color="#777777" face="Verdana"> * does it do anything with inline scripts, and order is important, it will minify</font>

<font color="#777777" face="Verdana"> * up to the point that it meets something that can't be minified, and then output</font>

<font color="#777777" face="Verdana"> * the minified version, then the item(s) that couldn't be minified, and then attempt</font>

<font color="#777777" face="Verdana"> * to minify items again, repeating the process till it is completed. Here is an</font>

<font color="#777777" face="Verdana"> * example of output from the example above.</font>

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana">&lt;script type="text/javascript" src="/min/?f=/js/main.js,/js/jquery-1.3.2.min.js,/js/jquery.color.js,</font>

<font color="#777777" face="Verdana">                    /js/jquery.autocomplete.js,/js/jquery.tablesorter.min.js,/js/jquery.checkbox.js,</font>

<font color="#777777" face="Verdana">                    /js/jquery.maskedinput.js,/js/jqModal.js,/js/jquery.alerts.js,/js/sorttable.js,</font>

<font color="#777777" face="Verdana">                    /js/jquery.delaytrigger.js"&gt;&lt;/script&gt;</font>

<font color="#777777" face="Verdana">&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/someObject/2.2/object.js"&gt;&lt;/script&gt;</font>

<font color="#777777" face="Verdana">&lt;script type="text/javascript"&gt;</font>

<font color="#777777" face="Verdana">    //&lt;![CDATA[</font>

<font color="#777777" face="Verdana"></font>&nbsp;

<font color="#777777" face="Verdana">		$(document).ready(function() {</font>

<font color="#777777" face="Verdana">			$('#ajaxWait').ajaxStart(function() {</font>

<font color="#777777" face="Verdana">		      $(this).show();</font>

<font color="#777777" face="Verdana">		    }).ajaxStop(function() {</font>

<font color="#777777" face="Verdana">		      $(this).hide();</font>

<font color="#777777" face="Verdana">			      });</font>

<font color="#777777" face="Verdana">			</font>

<font color="#777777" face="Verdana">			try { init(); } catch(e) {}</font>

<font color="#777777" face="Verdana">		});</font>

<font color="#777777" face="Verdana">	    //]]&gt;</font>

<font color="#777777" face="Verdana"></font>&nbsp;

<font color="#777777" face="Verdana">&lt;/script&gt;</font>

<font color="#777777" face="Verdana"></font>&nbsp;

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana"> * </font>

<font color="#777777" face="Verdana"> *</font>

<font color="#777777" face="Verdana"> * @see        http://code.google.com/p/minify/</font>

<font color="#777777" face="Verdana"> * @package    Zend_View</font>

<font color="#777777" face="Verdana"> * @subpackage Helper</font>

<font color="#777777" face="Verdana"> * @copyright  Copyright (c) 2010-2011 Signature Tech Studios (http://www.stechstudio.com)</font>

<font color="#777777" face="Verdana"> * @license    http://framework.zend.com/license/new-bsd     New BSD License</font>

<font color="#777777" face="Verdana"> * @author     Rob "Bubba" Hines</font>

<font color="#777777" face="Verdana"> *</font>

<font color="#777777" face="Verdana"> */</font>
</pre>
</blockquote>
<p>One of the questions I most regularly get is “why do you use prepend in your examples as opposed to append?” There is absolutely nothing preventing you from doing just that, assuming you are certain you have not made a call in the controller to assign scripts to the queue. If you are certain of that, and you are only modifying the script queue in the layout file, do whatever tickles you pink. I, however, tend to make some decisions on which JS and CSS will be included in the final results while I’m still in the controller, and order tends to get important, so prepending makes the most sense to me. Given that prepending assumes the most complex usage, it also seemed a good idea for the examples.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.hines57.com/2011/03/13/zendframework-minify/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Learning JQuery</title>
		<link>http://blog.hines57.com/2008/02/29/learning-jquery/</link>
		<comments>http://blog.hines57.com/2008/02/29/learning-jquery/#comments</comments>
		<pubDate>Fri, 29 Feb 2008 14:39:39 +0000</pubDate>
		<dc:creator>Bubba</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.hines57.com/?p=62</guid>
		<description><![CDATA[JQuery is a relatively powerful Javascript library that can be incorporated into webpages and used to extend them in some exciting and creative ways. Not only does it provide AJAX ...]]></description>
			<content:encoded><![CDATA[<p>JQuery is a relatively powerful Javascript library that can be incorporated into webpages and used to extend them in some exciting and creative ways. Not only does it provide AJAX functionality out of the box, there are literally hundreds of ways to manipulate your page in the browser. A friend of mine (Joseph Szobody &#8211; Signature Tech Studio) has been encouraging me to learn to leverage this library and suggested this book as a method of diving in.</p>
<p>I found the book itself to be quite well written. It begins by making no assumptions regarding your knowledge of JQuery (although it does assume you grok JScript) and starts with the most basic steps all the time pushing toward more powerful usages of the library.</p>
<p>With numerous real-world client-side issues addressed, you are bound to find a solution to 90% of your questions in the first few chapters. JQuery is also extensible, and many people out there are continually writing libraries on top of it.</p>
<p>This book dedicates the last few chapters to a review of some of the more common\popular libraries and assists you in understanding where you might leverage it in your projects.</p>
<p>All together, if you have never touched JQuery and are interested in learning something about it, this is a great book for you. If you already know a bit about the language, you are probably looking for something else though.</p>
<h2><a name="LearningJQuery-ISBN13#:9781847192509"></a>ISBN-13 #: 978-1-847192-50-9</h2>
<h2><a name="LearningJQuery-Recommended?:Yes"></a>Recommended?: Yes</h2>
]]></content:encoded>
			<wfw:commentRss>http://blog.hines57.com/2008/02/29/learning-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

