<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" version="2.0">

<channel>
	<title>Intereactive</title>
	
	<link>http://blueprint.intereactive.net</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Wed, 21 Oct 2009 19:41:18 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<geo:lat>29.573345</geo:lat><geo:long>-95.632132</geo:long><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/intereactive" type="application/rss+xml" /><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Ffeeds.feedburner.com%2Fintereactive" src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif">Subscribe with My Yahoo!</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2Fintereactive" src="http://www.newsgator.com/images/ngsub1.gif">Subscribe with NewsGator</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://feeds.my.aol.com/add.jsp?url=http%3A%2F%2Ffeeds.feedburner.com%2Fintereactive" src="http://o.aolcdn.com/favorites.my.aol.com/webmaster/ffclient/webroot/locale/en-US/images/myAOLButtonSmall.gif">Subscribe with My AOL</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.bloglines.com/sub/http://feeds.feedburner.com/intereactive" src="http://www.bloglines.com/images/sub_modern11.gif">Subscribe with Bloglines</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.netvibes.com/subscribe.php?url=http%3A%2F%2Ffeeds.feedburner.com%2Fintereactive" src="http://www.netvibes.com/img/add2netvibes.gif">Subscribe with Netvibes</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://fusion.google.com/add?feedurl=http%3A%2F%2Ffeeds.feedburner.com%2Fintereactive" src="http://buttons.googlesyndication.com/fusion/add.gif">Subscribe with Google</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.pageflakes.com/subscribe.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2Fintereactive" src="http://www.pageflakes.com/ImageFile.ashx?instanceId=Static_4&amp;fileName=ATP_blu_91x17.gif">Subscribe with Pageflakes</feedburner:feedFlare><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com" /><item>
		<title>iPhone and the 1 Pixel Out player</title>
		<link>http://blueprint.intereactive.net/iphone-and-the-1-pixel-out-player/</link>
		<comments>http://blueprint.intereactive.net/iphone-and-the-1-pixel-out-player/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 19:41:18 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=397</guid>
		<description><![CDATA[The Problem
As just about everyone knows the iPhone is incapable of playing any sort of Flash through the mobile Safari browser and generally speaking everyone has adapted and found work arounds or changed their sites accordingly as to not require Flash for certain things.
On my personal blog about music, one of the most used plugins [...]]]></description>
			<content:encoded><![CDATA[<h4>The Problem</h4>
<p>As just about everyone knows the iPhone is incapable of playing any sort of Flash through the mobile Safari browser and generally speaking everyone has adapted and found work arounds or changed their sites accordingly as to not require Flash for certain things.</p>
<p>On my <a href="http://rebuilt.galleywinter.com/">personal blog about music</a>, one of the most used plugins I have installed is the <a href="http://www.1pixelout.net/code/audio-player-wordpress-plugin/">1 Pixel Out flash MP3 player</a>. And by the number of downloads and searches I&#8217;ve seen it&#8217;s one of the most popular ways to quickly play an mp3 inline to a blog post. It&#8217;s customizable, looks great and most of all it works perfect! That is until you try to view the post from your iPhone.</p>
<h4>The Solution</h4>
<p>So I hacked around the plugin and created the following patch that will detect if your viewer is using an iPhone, and if so it will serve the MP3 with a clickable &#8220;Play&#8221; image. This allows your viewer to play the mp3 straight through the iPhone! Your viewers will no longer get the no-flash error but instead get this:<br />
<a href = "http://blueprint.intereactive.net/wp-content/uploads/fine.mp3"><img src = "http://blueprint.intereactive.net/wp-content/uploads/iphone_play.png" /></a></p>
<h4>Installation</h4>
<p>Just download this zip and go to your plugins folder for Wordpress. Replace your audio-player.php file with the one provided and put the iphone_play.png image in the assets folder. That&#8217;s it!</p>
<div class="buttons"><a href="http://intereactive.org/code_releases/audio-player-iphone.zip"><img src="http://intereactive.net/themes/site_themes/v2/img/arrow_down.png" alt=""/>Download</a><br class = "clear" /></div>
<p>Please note that this is based on version 2.0 beta 6. And I haven&#8217;t tested all the different methods so you may see an issue here or there. Just hit me up if you have a problem and I&#8217;ll try to fix it. I&#8217;m hoping that 1 Pixel Out will integrate this into the 2.0 release officially. <em>BTW, The user agent detection function was borrowed from <a href="http://www.bravenewcode.com/wptouch/">WPtouch</a>.</em></p>
<p>For you folks that want to manually do it or see what has been changed just have a look below. In the audio-player.php file you will need to make the following changes:</p>
<p>Add the following to line 300:</p>
<pre class="brush: php;">
		/**
		 * Detects if the user agent is an iPhone or iPod
		 * returns true or false
		 */
		function detectAppleMobile($query = '') {
			$container = $_SERVER['HTTP_USER_AGENT'];
				$useragents = array(
				&quot;iphone&quot;,  				 // Apple iPhone
				&quot;ipod&quot;, 					 // Apple iPod touch
				&quot;aspen&quot;, 				 // iPhone simulator
				&quot;incognito&quot;, 			 // Other iPhone browser
				&quot;webmate&quot; 			 // Other iPhone browser
			);
			$applemobile = false;
			foreach ( $useragents as $useragent ) {
				if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
					$applemobile = true;
				}
			}

			return $applemobile;
		}
</pre>
<p>after inserting that code around line 534 you will see:</p>
<pre class="brush: php;">
			} else {
				// Not in a feed so return player widget
				$playerElementID = &quot;audioplayer_&quot; . $this-&gt;playerID;
				$playerCode = '&lt;p class=&quot;audioplayer_container&quot;&gt;&lt;span style=&quot;display:block;padding:5px;border:1px solid #dddddd;background:#f8f8f8&quot; id=&quot;' . $playerElementID . '&quot;&gt;' . sprintf(__('Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version &lt;a href=&quot;%s&quot; title=&quot;Download Adobe Flash Player&quot;&gt;here&lt;/a&gt;. You also need to have JavaScript enabled in your browser.', $this-&gt;textDomain), 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&amp;amp;promoid=BIOW');
				$playerCode .= '&lt;/span&gt;&lt;script type=&quot;text/javascript&quot;&gt;';
				$playerCode .= 'AudioPlayer.embed(&quot;' . $playerElementID . '&quot;, ' . $this-&gt;php2js($playerOptions) . ');';
				$playerCode .= '&lt;/script&gt;&lt;/p&gt;';
				return $playerCode;
			}
</pre>
<p>which needs to be replaced with:</p>
<pre class="brush: php;">
			} else {
				if($this-&gt;detectAppleMobile()){
					$iphone_player = '';

					foreach ( explode( &quot;,&quot;, $source) as $afilename ) {
						$afilename = trim($afilename);
						$iphone_player .= '&lt;a href=&quot;'.$afilename.'&quot;&gt;&lt;img src = &quot;'.WP_CONTENT_URL.'/plugins/audio-player/assets/iphone_play.png&quot;&gt;&lt;/a&gt;&lt;br /&gt;';
					}
					return $iphone_player;
				} else {
					// Not in a feed so return player widget
					$playerElementID = &quot;audioplayer_&quot; . $this-&gt;playerID;
					$playerCode = '&lt;p class=&quot;audioplayer_container&quot;&gt;&lt;span style=&quot;display:block;padding:5px;border:1px solid #dddddd;background:#f8f8f8&quot; id=&quot;' . $playerElementID . '&quot;&gt;' . sprintf(__('Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version &lt;a href=&quot;%s&quot; title=&quot;Download Adobe Flash Player&quot;&gt;here&lt;/a&gt;. You also need to have JavaScript enabled in your browser.', $this-&gt;textDomain), 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&amp;amp;promoid=BIOW');
					$playerCode .= '&lt;/span&gt;&lt;script type=&quot;text/javascript&quot;&gt;';
					$playerCode .= 'AudioPlayer.embed(&quot;' . $playerElementID . '&quot;, ' . $this-&gt;php2js($playerOptions) . ');';
					$playerCode .= '&lt;/script&gt;&lt;/p&gt;';
					return $playerCode;
				}
			}
</pre>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=x4TMmJGCePg:r1gGQFbMWJ4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=x4TMmJGCePg:r1gGQFbMWJ4:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=x4TMmJGCePg:r1gGQFbMWJ4:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/iphone-and-the-1-pixel-out-player/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://blueprint.intereactive.net/wp-content/uploads/fine.mp3" length="4755997" type="audio/mpeg" />
		</item>
		<item>
		<title>Caching, Etags &amp; PHP sessions</title>
		<link>http://blueprint.intereactive.net/caching-etags-php-sessions/</link>
		<comments>http://blueprint.intereactive.net/caching-etags-php-sessions/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 13:52:02 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=392</guid>
		<description><![CDATA[I spent more than half a day yesterday trying to uncover why the code that delivers our Javascript and CSS suddenly quit being cached locally in the browser. Seemingly out of the blue, every page load was pulling down a new copy of the files, which is unacceptable when they are over 100kb even in [...]]]></description>
			<content:encoded><![CDATA[<p>I spent more than half a day yesterday trying to uncover why the code that delivers our Javascript and CSS suddenly quit being cached locally in the browser. Seemingly out of the blue, every page load was pulling down a new copy of the files, which is unacceptable when they are over 100kb even in a compressed state. <a href="http://blueprint.intereactive.net/changes-no-one-should-be-afraid/">Akira</a> <a href="http://blueprint.intereactive.net/compressing-javascript-part-1/">uses a variation</a> of the <a href="http://rakaz.nl/code/combine">Combine script</a> to combine, compress, serve and cache all our JS and CSS. It&#8217;s a script that more people should be using due to it&#8217;s simplicity and how well it works&#8230; when it works. Let&#8217;s take a step backwards and I&#8217;ll tell you how the caching works before I get into how I fixed it, why it was broken and why PHP is to blame (sorta).</p>
<h4>Etags</h4>
<p>An Etag is an HTTP response header that may be returned from your web server and is used <strong>to determine change in content</strong> on a given page. What that means is that it allows you to check a page and return either a <strong>304 Not Modified</strong> response with no content or a <strong>200 OK</strong> response with all the page content. Or even more practically, we can check our CSS and JS pages and the server will tell us if they&#8217;ve changed or not&#8230; and if not then use the local browser cache.</p>
<p>You can&#8217;t just call http://example.com/style.css and have it work. You have to have PHP check and send the proper Etag headers, which is where the Combine script comes in since it does all this for you. The script checks the <em>Last Modified Date</em> of each CSS/JS file and uses that in the Etag. The Etag changes when the CSS file changes, thereby telling your browser to use the new content. It&#8217;s brilliant really&#8230; and I can&#8217;t figure out why more people don&#8217;t use this method other than the VERY MINIMAL overhead (low milliseconds) that is needed to check the Etag header.</p>
<h4>Etags and PHP</h4>
<p>Lets look at how PHP gets involved in all this. PHP has access to a server variable called $_SERVER['HTTP_IF_NONE_MATCH'] that returns NULL if the Etags do not match. Using this variable it allows us to know if any content has changed and then act on that. Let me give you a quick example of how it works:</p>
<pre class="brush: php;">
header('Etag: &quot;This is the Etag header content.&quot;');

if(!isset($_SERVER['HTTP_IF_NONE_MATCH'])){
	echo &quot;$_SERVER['HTTP_IF_NONE_MATCH'] is not set&quot;;
}else{
	// $_SERVER['HTTP_IF_NONE_MATCH'] is set so return 304
	header (&quot;HTTP/1.0 304 Not Modified&quot;);
	header ('Content-Length: 0');
}
</pre>
<h4>Houston we have a PHP problem</h4>
<p>So if the Combine script works so great why did it stop working for us? In simple terms, PHP sort of got in the way. We started off using Combine in it&#8217;s native form&#8230; just  a straight call to combine.php which served the CSS/JS. However, we recently integrated it into our framework to keep things streamlined, but I never went back to check the caching. I just figured it would still work. That was my mistake and why several months later I thought it quit working &#8220;out of the blue&#8221; when in fact it had stopped as soon as we integrated it.</p>
<p>The root problem is that when PHP uses sessions it modifies the cache headers because of the dynamic nature of using sessions. And wouldn&#8217;t you know it.. we use sessions (surprise surprise) and our app calls in a sessions class in the overhead portion of the app. What that means is that a session was started on each page load, including these JS and CSS calls. What happens is that when <em><a href="http://php.net/session_start">session_start()</a></em> is called the server variable $_SERVER['HTTP_IF_NONE_MATCH'] is removed since PHP thinks that we don&#8217;t want to serve static content. Fun times and I now see why Rasmus dislikes frameworks due to the overhead issues. </p>
<h4>Solution</h4>
<p>Not being a core PHP dev I can only assume there is a real reason for how PHP handles sessions that is helpful in other instances. However to get around it I can either bypass the session_start() for JS and CSS calls (changing the overhead of the framework) or I can use the following helpful bit of code that is in PHP to allow us to change the normal behavior of sessions. Before we call session_start() we simply tell PHP that we want to set the &#8220;session cache limiter&#8221; to private by calling <em><a href="http://php.net/session_cache_limiter">session_cache_limiter(&#8217;private_no_expire&#8217;)</a></em>.</p>
<p>So there you go.. a simple fix which took my half a day to track down. Hopefully I will have saved a few people the same headache when trying to use Etags and PHP sessions.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=kznf-eWa_9o:9z6Tf0iHOO8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=kznf-eWa_9o:9z6Tf0iHOO8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=kznf-eWa_9o:9z6Tf0iHOO8:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/caching-etags-php-sessions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PHP Benchmark/Timer Class</title>
		<link>http://blueprint.intereactive.net/php-benchmark-timer-class/</link>
		<comments>http://blueprint.intereactive.net/php-benchmark-timer-class/#comments</comments>
		<pubDate>Thu, 20 Aug 2009 16:30:52 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=339</guid>
		<description><![CDATA[Overview
This is a PHP class that calculates the time between specified points. It can be used to determine how long your page took to generate or how long certain loops take to run. This class is very flexible because it allows you to specify any number of &#8220;marker&#8221; points in the code and then compare [...]]]></description>
			<content:encoded><![CDATA[<h3>Overview</h3>
<p>This is a PHP class that calculates the time between specified points. It can be used to determine how long your page took to generate or how long certain loops take to run. This class is very flexible because it allows you to specify any number of &#8220;marker&#8221; points in the code and then compare any of them together.</p>
<p>There is nothing fancy about it. I ran across a post from someone looking for something like this and claimed it was hard to find&#8230; so I figured I&#8217;d release what we have in an effort to help anyone else out there.</p>
<h4>Current Version: 1.0</h4>
<div class="buttons"><a href="http://php-benchmark-timer.googlecode.com/files/class.benchmark.zip"><img src="http://intereactive.net/themes/site_themes/v2/img/arrow_down.png" alt=""/>Download</a><br class = "clear" /></div>
<p>Source is hosted at <a href="http://code.google.com/p/php-benchmark-timer/">Google Code</a></p>
<h3>Features</h3>
<ul class = "green_arrows">
<li>PHP5+ only</li>
<li>Sets the first marker automatically</li>
<li>Multiple markers</li>
<li>Markers are stored so they can also be used as a totalizer</li>
</ul>
<h3>How To Use It</h3>
<p>The use is really basic. Which is good, because let&#8217;s be honest.. it&#8217;s just a timer. </p>
<h5>A basic use:</h5>
<pre class="brush: php;">
$bm = new Benchmark();
//code here
$bm-&gt;mark('end');
echo $bm-&gt;elapsed('start', 'end') . &quot; Seconds&quot;;
//note that 'start' was auto generated
</pre>
<h5>Another use where we use other markers for something like sending an email</h5>
<pre class="brush: php;">
$bm = new Benchmark();

$bm-&gt;mark('email_start');
//email code here
$bm-&gt;mark('email_stop');

echo $bm-&gt;elapsed('email_start', 'email_stop') . &quot; Seconds&quot;;
</pre>
<h5>Using it as a totalizer</h5>
<pre class="brush: php;">
$bm = new Benchmark();

$total_time = 0;
foreach($emails as $email){
	$bm-&gt;mark('email_start');
	//email code here
	$bm-&gt;mark('email_stop');

	$total_time += $bm-&gt;elapsed('email_start', 'email_stop');
}

echo $total_time . &quot; Seconds&quot;;
</pre>
<h3>Full Documentation</h3>
<h4>Initializing the Class</h4>
<p><code>$bm = new Benchmark();</code></p>
<ul class = "docs">
<li>When the class is initialized a marker is auto-generated called &#8217;start&#8217; through the __construct method.</li>
</ul>
<h4>Public Methods</h4>
<ul class = "docs">
<li><b>$this->mark(string <em>$name</em>)</b></li>
<li>
<ul class = "docs">
<li>Sets a marker with the name that is passed in.</li>
<li><span>$name</span> – (<em>string</em>) Name of the marker you are setting</li>
</ul>
</li>
</ul>
<p>&nbsp;</p>
<ul class = "docs">
<li><b>$this->elapsed(string <em>$point1</em>, string <em>$point2</em> [, int <em>$decimals = 4</em>])</b></li>
<li>
<ul class = "docs">
<li>Gets the elapsed time between two marker points</li>
<li><span>$point1</span> – (<em>string</em>) Name of the first marker you are checking</li>
<li><span>$point2</span> – (<em>string</em>) Name of the second marker you are checking</li>
<li><span>$decimal</span> – (<em>integer</em>, optional) Number of decimal places you want displayed in the result</li>
</ul>
</li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=BuAH1ildhd0:cgK8Wct0Rpk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=BuAH1ildhd0:cgK8Wct0Rpk:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=BuAH1ildhd0:cgK8Wct0Rpk:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/php-benchmark-timer-class/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Benchmarking our PHP</title>
		<link>http://blueprint.intereactive.net/benchmarking-our-php/</link>
		<comments>http://blueprint.intereactive.net/benchmarking-our-php/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 15:23:58 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=273</guid>
		<description><![CDATA[Benchmarking code is one of those often talked about things that most new to intermediate programmers have probably heard about, but don&#8217;t know how to actually do it. Even a quick Google search on it will give you all sorts of mis-information and very labor intensive ways to find where your code is slowing down. [...]]]></description>
			<content:encoded><![CDATA[<p>Benchmarking code is one of those often talked about things that most new to intermediate programmers have probably heard about, but don&#8217;t know how to actually do it. Even a quick Google search on it will give you all sorts of mis-information and very labor intensive ways to find where your code is slowing down. </p>
<h3>Is Microtime() Bad?</h3>
<p>Many of the &#8220;common&#8221; ways involve using the microtime() function to mark a start and end time and then doing some math to see how long it took to get from A to B. On the surface there is nothing wrong with this. In fact, we use this same method to output overall script generation times or SQL processing times to get a feel for when we write an extremely inefficient piece of code or SQL statement. A sort of alarm beacon to say &#8220;Hey, this code is WAY to slow&#8221;. </p>
<p>If you ask most race car drivers/owners that win consistently, they will always tell you that their success is in the details. It&#8217;s not the big things, it&#8217;s the 20 small tweaks that put them out in front their competition. And if you are developing a full blown CMS or web application and relying solely on microtime(), then you are sorely missing out on some tools you can use to take your code from bearable to fast.</p>
<h3>Moving Beyond Microtime()</h3>
<p>So, we obviously use microtime() to immediately see how our SQL calls and overall code is performing. If there is a slowdown ,then how do you figure out where it&#8217;s happening? Do you go through each file and add in these microtime()&#8217;s before and after each set of code? No.. that would be way to labor intensive (even though I have done it a time or two). Our answer is to use the amazing PHP extension <a href="http://www.xdebug.org">xDebug</a> . A few years ago we installed it as a way to trace through errors more effectively. It will overwrite PHP&#8217;s native error&#8217;s and output a stack/function trace to see how you got the error, which is extremely useful. </p>
<p>Another useful part of xDebug is it&#8217;s built in PHP Profiler, which is what we will use to find the slowdowns. If you turn it on, it generates a cachegrind file that can be analyzed by one of the many programs out there. We use a web based analyzer called <a href="http://code.google.com/p/webgrind/">WebGrind</a>, which is basically just a set of PHP scripts that go through the files that xDebug generates. It will show you EVERY function that was called, how many times it was called and how long it took to run. It also shows you what files were included and how long each of those took to process. It is an amazing tool that will give you quick results on your entire code. Just this past week I reviewed a page and realized that I left some debugging code in that was eating up some serious memory.</p>
<p><a href="http://blueprint.intereactive.net/wp-content/uploads/2009/06/webgrind_large.png"><img src="http://blueprint.intereactive.net/wp-content/uploads/2009/06/webgrind_large-420x309.png" alt="webgrind_large" title="webgrind_large" width="420" height="309" class="aligncenter size-medium wp-image-283" /></a></p>
<h3>Load Up The Server</h3>
<p>Another tool we use is <a href="http://www.joedog.org/index/siege-home">Siege</a>, which allows the us hit a web server with a number of concurrent simulated users. Basically we stress test the code and see how fast it will respond. We set some max response time numbers that we will stay below. This helps us avoid adding too many features on one page, making it slow. Siege is a command line tool that I&#8217;ve only ever installed on a Mac (linux) but it does say it will install on Windows. To ease the installation I also use a program for Mac called <a href="http://darwinports.com/">DarwinPorts</a>, but doing a regular install is not that big of a deal.</p>
<p><strong>Some output from Siege.</strong></p>
<pre class="brush: bash; highlight: [6,7];">
% siege -c 5 http://akira.localhost -t30s
Transactions:               1406 hits
Availability:             100.00 %
Elapsed time:              30.47 secs
Data transferred:          14.54 MB
Response time:              0.08 secs
Transaction rate:          55.14 trans/sec
Throughput:                 0.48 MB/sec
Concurrency:                4.99
Successful transactions:    1406
Failed transactions:           0
Longest transaction:       20.61
Shortest transaction:       0.02
</pre>
<p>In this example we hit the server with 5 users for 30 seconds and the output will show us how the code performs. The 2 main numbers we look at is Response Time and Transaction Rate. As you add features and more code it will effect these numbers, especially response time since that is the measure of how long it takes to send the first bits of data. If we can optimize our code to come in under our max response time, then that give us room to add more features without worrying about the app feeling sluggish.</p>
<h3>Is It Overkill</h3>
<p>Maybe. If you&#8217;re throwing together some quick scripts, then who cares? But if you are developing a full application that you want people to use then you might begin to care. <strong>We can not be lazy developers.</strong> Loading in a bunch of overhead to speed up development at the expense of our users is lazy coding. The only way to determine if we went too far in feature bloat on a page or using to much overhead is to benchmark and review our code. Anyone can read the PHP manual and create a website, but to be a great programmer you have to know where you are writing bad code and work to improve it. </p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=FZrNMMqOVKA:CkYJGgJcB0o:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=FZrNMMqOVKA:CkYJGgJcB0o:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=FZrNMMqOVKA:CkYJGgJcB0o:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/benchmarking-our-php/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Javascript DOM helpers to code faster</title>
		<link>http://blueprint.intereactive.net/javascript-dom-helpers-to-code-faster/</link>
		<comments>http://blueprint.intereactive.net/javascript-dom-helpers-to-code-faster/#comments</comments>
		<pubDate>Fri, 29 May 2009 14:00:44 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=263</guid>
		<description><![CDATA[When diving into PHP frameworks one of the handiest set of functions/methods you will find are the &#8220;Helpers&#8220;. The reason I like them so much is because they can really shorten the time it takes to write your code. A quick call to a helper can output lines and lines of HTML without actually writing [...]]]></description>
			<content:encoded><![CDATA[<p>When diving into PHP frameworks one of the handiest set of functions/methods you will find are the &#8220;<a href="http://docs.kohanaphp.com/general/helpers">Helpers</a>&#8220;. The reason I like them so much is because they can really shorten the time it takes to write your code. A quick call to a helper can output lines and lines of HTML without actually writing it.</p>
<p>Doing more and more CSS/XHTML development brought to light that sometimes there might be a need to wrap an image with a <em>span</em> or <em>div</em> element to produce a dropshadow effect or to position it how you want. Chris and I were having a discussion about this and he came up with an idea of adding some Javascript &#8220;helpers&#8221; to speed up the coding of our CSS/XHTML.</p>
<p>Let me give you an example to help clarify what I&#8217;m talking about. Let&#8217;s say we have an image and we need that image to have a dropshadow. To do this we need to wrap it in a <em>span</em> tag so that our CSS works properly. So everywhere we want a dropshadowed image we would have to have something like this:</p>
<pre class="brush: xml; light: true;">
&lt;span&gt;&lt;img src = &quot;image.png&quot; /&gt;&lt;/span&gt;
</pre>
<p>But we could easily write a javascript function (in our case we use jQuery) to have it auto-wrap all img elements having the class &#8220;dropshadow&#8221; with span tags. </p>
<pre class="brush: jscript; light: true;">
$('img.dropshadow').wrap(&quot;&lt;span&gt;&lt;/span&gt;&quot;);
</pre>
<p>This simplifies and speeds up the HTML we have to write, because all we have to put into our templates is an <em>img</em> tag. In this case it doesn&#8217;t save a ton of time, but when you think about it in terms of styling forms with images or changing buttons to use different image types or styles you really begin to save a lot of time. And the best part is that you can keep things semantically correct. The markup doesn&#8217;t need span tags to keep the semantic meaning of having an image. The spans are there just to add the detail of the dropshadow in. </p>
<p>I&#8217;ve seem this methodology used in many plugins, so we&#8217;re not coming up with any revolutionary. But the point of this post is to try to push developers that have the convenience of using javascript, to use it to speed up their development. In an upcoming post we&#8217;re going to be sharing our use of a helper that simplifies how we style many different buttons in Mosaic. Hopefully that will show a real world example where it is literally saving us hours of work, over the course of building the app, everywhere we have need of a button. </p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=REipgkuj_AI:20WwuP6mwRw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=REipgkuj_AI:20WwuP6mwRw:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=REipgkuj_AI:20WwuP6mwRw:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/javascript-dom-helpers-to-code-faster/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PHP DateTime object and MySQL</title>
		<link>http://blueprint.intereactive.net/php-datetime-object-and-mysql/</link>
		<comments>http://blueprint.intereactive.net/php-datetime-object-and-mysql/#comments</comments>
		<pubDate>Mon, 27 Apr 2009 23:36:39 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=255</guid>
		<description><![CDATA[PHP 5.2 brought us native use of a DateTime object for handling dates and times instead of using procedural date(), time() and strtotime() type functions. Among other things, this really helps us move away from thinking of dates and times in seconds (via a unix timestamp) and as such, having to save an integer in [...]]]></description>
			<content:encoded><![CDATA[<p>PHP 5.2 brought us native use of a <a href="http://us2.php.net/manual/en/class.datetime.php">DateTime object</a> for handling dates and times instead of using procedural date(), time() and strtotime() type functions. Among other things, this really helps us move away from thinking of dates and times in seconds (via a unix timestamp) and as such, having to save an integer in a database and/or using arithmetic (# of seconds X 60 = minutes, etc..) to manipulate dates. </p>
<p>So now that we can think of dates and times as a true date (e.g. 2009/04/27) all the way from PHP to MySQL, using a true date/time column type, it really speeds thing up. However, in the native DateTime <a href="http://us2.php.net/manual/en/class.datetime.php#datetime.constants.types">class constants</a> there is not a MySQL format for inserting the date object directly into a database. I realized that all I needed to do was create my own constant that aligns with the prebuilt ones.</p>
<p>Here is the only code you need</p>
<pre class="brush: php;">
define('DATE_MYSQL', &quot;Y/m/d H:i:s&quot;);
</pre>
<p>Here it is in context.</p>
<pre class="brush: php;">
define('DATE_MYSQL', &quot;Y/m/d H:i:s&quot;);

$dateTime = new DateTime(&quot;now&quot;);
echo $dateTime-&gt;format(DATE_MYSQL);
</pre>
<p>You&#8217;ll notice I use the same format as the other date constants like DATE_RSS to be consistent. Also note that with this same code you can set up any type of format that you can use on your site or in your code. </p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=HeLd_SvECNg:Lm6V3j6cAVc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=HeLd_SvECNg:Lm6V3j6cAVc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=HeLd_SvECNg:Lm6V3j6cAVc:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/php-datetime-object-and-mysql/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Changes… No one should be afraid</title>
		<link>http://blueprint.intereactive.net/changes-no-one-should-be-afraid/</link>
		<comments>http://blueprint.intereactive.net/changes-no-one-should-be-afraid/#comments</comments>
		<pubDate>Tue, 21 Apr 2009 22:06:00 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Company]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=249</guid>
		<description><![CDATA[Alot has happened in the last month or so around our little company. And while so much of it seems like steps backward, I feel like we&#8217;re progressing forward more than ever. Here&#8217;s a rundown of everything that has been going on the past few months with us both good and not so good and [...]]]></description>
			<content:encoded><![CDATA[<p>Alot has happened in the last month or so around our little company. And while so much of it seems like steps backward, I feel like we&#8217;re progressing forward more than ever. Here&#8217;s a rundown of everything that has been going on the past few months with us both good and not so good and hopefully you&#8217;ll see why the blog has been so dead as of late.</p>
<h3>The company</h3>
<p>A year or so ago we scaled back our client based work to set our focus on an idea for a web application that we really believe in and believe can help solve alot problems (and create some form of world peace). That change also brought a new opportunity for Phil to work for a great design company called <a href="http://www.springbox.com/">Springbox</a> in Austin as an Art Directors, but continuing to head up the creative direction here at Intereactive.  Over the past year our interests have taken different paths and as of this April, we all came to terms with the fact that Phil will no longer be here at Intereactive. Major bummer. We left on probably the best terms ever, so I can&#8217;t complain at all. In fact I believe trying to plod ahead when people aren&#8217;t &#8220;into it&#8221; really hurts you more than anything. If you are a fan of Phil&#8217;s work please check him out over at <a href="http://philcoffman.com">philcoffman.com</a>.</p>
<h3>Mootools to Jquery</h3>
<p>On a more technical note, the aftermath of our time at the SXSW conference left us with a major change to our JS framework. Chris and I went in to a Javascript panel where John Resig (creator of <a href="http://jquery.com/">jQuery</a>) was speaking and we both left with a very uneasy feeling about using our current framework Mootools. Let me make one thing very clear&#8230; We still love Mootools. And honestly, it&#8217;s very hard to pinpoint our exact reasons for switching. But chiefly among them was that we felt that while Mootools is a very strong framework, jQuery has a much brighter future. There seems to be much more involvement in releasing new code and more innovative ways in solving some of the problems. We&#8217;ve currently re-written all our code within Mosaic using jQuery and it&#8217;s much shorter (for whatever that is worth). There are definitely shortcomings in the animation side of things, but all in all we are very happy with the move.</p>
<h3>Focusing on the basics &#8211; a PHP framework</h3>
<p>We are mainly a PHP shop that has been writing code since before most people knew what a framework really was, so when it came time to start writing an application we pretty much already had our own lean, mean framework that we were already familiar with. The last few months we&#8217;ve taken that framework and really oiled the gears and shined up the fenders and made it into a full blown MVC framework using syntax that we are familiar with. With Chris&#8217;s insistance, we&#8217;ve broken it out of the application, made it it&#8217;s own project, and given it life through the name &#8220;Akira&#8221;. The name Akira comes from the name of the <a href="http://www.absoluteanime.com/voltron/keith.htm">Commander of the Black Lion</a> (the core leader) of Voltron&#8230; so in turn, our Akira is also the core of what makes an overall project work and function properly. Well that and we&#8217;re just geeks at heart. It&#8217;s something we can quickly plop onto a blank slate and have an idea fleshed out in less than a day. Just yesterday I coded up an entire home finance manager for my personal use in less than 5-6 hours using the framework. </p>
<p>And before we get the request&#8230; no, we won&#8217;t be releasing it to the public. It&#8217;s honestly no better than <a href="http://codeigniter.com">CodeIgniter</a> or <a href="http://kohanaphp.com/">Kohana</a>&#8230; we are just familiar with the methods and syntax of our own stuff so it&#8217;s faster for us to write. If you aren&#8217;t using a framework.. Use one! I suggest Kohana.</p>
<h3>Errata</h3>
<p>So in summary&#8230; we lost a badass designer (very sad), switched to an awesome JS framework (very happy), and spent way too much time developing Akira (very very happy). There are countless other things that have sidetracked us over the past year such as redefining our goals, having kids, taking vacations and going to conferences. But now I believe we have the focus we need and the tools to get there. It&#8217;s amazing how change can be so frustrating, but once you are through it, it is so freeing. We&#8217;ll be reworking the Intereactive site soon to be more inline with who we are now and also be showing off some features of Mosaic in the blog in the next few weeks or so.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=KCp_KBj1Sck:8jubE3tqi-8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=KCp_KBj1Sck:8jubE3tqi-8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=KCp_KBj1Sck:8jubE3tqi-8:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/changes-no-one-should-be-afraid/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>MultiSlide for Mootools</title>
		<link>http://blueprint.intereactive.net/multislide-for-mootools/</link>
		<comments>http://blueprint.intereactive.net/multislide-for-mootools/#comments</comments>
		<pubDate>Wed, 25 Feb 2009 00:00:20 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Mootools]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=151</guid>
		<description><![CDATA[Overview
MultiSlide is a Mootools class that will group multiple slide effects together and allow you to slide them all in or out at one time. MultiSlide will also allow you to retain individual control over each slide and it contains several callback events for easier integration into your UI.
Current Version: 1.0
Download
Source is hosted at GitHub
Features

Built [...]]]></description>
			<content:encoded><![CDATA[<h3>Overview</h3>
<p>MultiSlide is a Mootools class that will group multiple slide effects together and allow you to slide them all in or out at one time. MultiSlide will also allow you to retain individual control over each slide and it contains several callback events for easier integration into your UI.</p>
<h4>Current Version: 1.0</h4>
<div class="buttons"><a href="http://sandbox.intereactive.org/multi_slide/multi_slide.zip"><img src="http://intereactive.net/themes/site_themes/v2/img/arrow_down.png" alt=""/>Download</a><br class = "clear" /></div>
<p>Source is hosted at <a href="http://github.com/intereactive/multislide">GitHub</a></p>
<h3>Features</h3>
<ul class = "green_arrows">
<li>Built on Mootools 1.2 and weighs in at 4kb (uncompressed)</li>
<li>Opening or closing of multiple slides with one button</li>
<li>Retains individual control over each separate slide</li>
<li>Uses customizable CSS classes for hooks, so that no additional markup is needed</li>
<li>Several callback events for custom UI controls</li>
<li>Transition speed and type are configurable</li>
</ul>
<h3>Demo</h3>
<ul class = "docs">
<li><a href="http://sandbox.intereactive.org/multi_slide">Basic Example</a></li>
<li><a href="http://sandbox.intereactive.org/multi_slide/more.php">Example with a few more options</a></li>
<ul>
<h3>How To Use It</h3>
<p>The basic structure should closely follow the following structure when building multiple slides. You can have as many of the &#8220;ms_container&#8217;s&#8221; as you need and all are controlled by the top two elements. Consider each of the following sections as an HTML element with the class name as shown. Please note that these are just the default class names and can be replaced with your own custom ones to reduce markup.<br />
<img src="http://blueprint.intereactive.net/wp-content/uploads/2009/02/multislide.png" alt="multislide" title="multislide" width="400" height="245" class="alignnone size-full wp-image-167" style = "margin:8px 0;" /><br />
The standard way to initialize MultiSlide is to call the class and pass in the CSS class name of the element that wraps each slide. In this case it would be:<br />
<code>var multislide = new multislide('ms_container');</code><br />
You can also call the &#8220;expand all&#8221; and &#8220;collapse all&#8221; methods from your javascript by calling:<br />
<code>multilside.expand_all();<br />
multilside.collapse_all();</code></p>
<p>Please read the documentation below and look at the demos to see how to further customize the MultiSlide class.</p>
<h3>Documentation</h3>
<h4>Syntax</h4>
<p><code>new multislide(container_class [, options]);</code></p>
<h4>Arguments</h4>
<ul class = "docs">
<li><span>container_class</span> &#8211; (<em>mixed</em>) A string of the CSS class name that wraps each slide instance</li>
<li><span>options</span> &#8211; (<em>object</em>, optional) key/value set of options</li>
</ul>
<h4>Options</h4>
<ul class = "docs">
<li><span>slide_duration</span> &#8211; (<em>number</em>) duration (in milliseconds) of the slide; defaults to 300</li>
<li><span>slide_transition</span> &#8211; (<em>string</em>) transition that the slide should use; defaults to &#8217;sine:in:out&#8217;</li>
<li><span>class_expand_all</span> &#8211; (<em>string</em>) CSS class name that is applied to the element that will expand all the slides; defaults to &#8216;expand_all&#8217;</li>
<li><span>class_collapse_all</span> &#8211; (<em>string</em>) CSS class name that is applied to the element that will collapse all the slides; defaults to &#8216;collapse_all&#8217;</li>
<li><span>class_toggler</span> &#8211; (<em>string</em>) CSS class name that is applied to the element that will toggle the individual slide; defaults to &#8216;ms_toggler&#8217;</li>
<li><span>class_expander</span> &#8211; (<em>string</em>) CSS class name that is applied to the element that will be the slide; defaults to &#8216;ms_expander&#8217;</li>
</ul>
<h4>Methods</h4>
<ul class = "docs">
<li><span>expand_all</span> &#8211; Used to expand all the slides at one time</li>
<li><span>collapse_all</span> &#8211; Used to collapse all the slides at one time</li>
</ul>
<h4>Custom Events</h4>
<ul class = "docs">
<li><span>onExpand</span> &#8211; Fired anytime a single slide in the group is exapnded by it&#8217;s toggler. Passes the toggler element that was clicked back to the event to be able to make UI changes.</li>
<li><span>onCollapse</span> &#8211; Fired anytime a single slide in the group is collapsed by it&#8217;s toggler. Passes the toggler element that was clicked back to the event to be able to make UI changes.</li>
<li><span>onExpand_all</span> &#8211; Fired anytime the &#8220;exapand all&#8221; runs</li>
<li><span>onCollapse_all</span> &#8211; Fired anytime the &#8220;collapse all&#8221; runs</li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=B8mPHZuQAiU:IVNS3_-3Dg8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=B8mPHZuQAiU:IVNS3_-3Dg8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=B8mPHZuQAiU:IVNS3_-3Dg8:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/multislide-for-mootools/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Mootools DOM selector tips</title>
		<link>http://blueprint.intereactive.net/mootools-dom-selector-tips/</link>
		<comments>http://blueprint.intereactive.net/mootools-dom-selector-tips/#comments</comments>
		<pubDate>Sun, 15 Feb 2009 17:23:59 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Mootools]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=130</guid>
		<description><![CDATA[In most javascript frameworks, one of the most powerful tools they offer is the DOM selector function. It&#8217;s commonly known in Mootools and Prototype as the double-dollar ($$) and in jQuery it&#8217;s just a single-dollar ($). It allows us to search and find elements in the DOM and return them as an array.
For instance, $$(&#8221;p&#8221;) [...]]]></description>
			<content:encoded><![CDATA[<p>In most javascript frameworks, one of the most powerful tools they offer is the DOM selector function. It&#8217;s commonly known in Mootools and Prototype as the double-dollar ($$) and in jQuery it&#8217;s just a single-dollar ($). It allows us to search and find elements in the DOM and return them as an array.</p>
<p>For instance, $$(&#8221;p&#8221;) will return an array of all the elements in the DOM with the p tag. A more powerful example would be $$(&#8221;.post&#8221;), where you get a returned array of elements that have the class &#8220;post&#8221;. Add in some Mootools slickness and we can really make it powerful by use of the <a href="http://mootools.net/docs/Utilities/Selectors">Selectors</a> such as $$(&#8221;.post:last-child&#8221;) to select the last element that has the class &#8220;post&#8221;.</p>
<p>As I&#8217;ve been active in the Mootools forums and various blogs and such, I&#8217;ve seen lots of people that are new to Mootools (or JS in general), not quite understand what to do with this function. One of the key things to remember when dealing with this function is that it returns the elements in a way that you can apply all the <a href="http://mootools.net/docs/Element/Element#Element">Mootools element methods</a>. </p>
<p>Here are some examples of how I often see this function overcomplicated</p>
<pre class="brush: jscript;">
//Common way that is used
$$('.status').each(function(el){
	el.set('html','Success');
});

//Shorter way to write this
$$('.status').set('html','Success');
</pre>
<p>Or a more complex example where chaining together methods can be used. <em>As Aaron points out in the comments chaining methods causes the selector to run multiple times, which with a large result set will hinder performance.</em></p>
<pre class="brush: jscript;">
//Common way that is used
$$('.status').each(function(el){
	el.set('html','Success');
	el.highlight();
});

//Shorter way to write this
$$('.status').set('html','Success').highlight();
</pre>
<p>Mootools also allows you to apply <a href="http://mootools.net/docs/Fx/Fx.Tween">Tween</a> or <a href="http://mootools.net/docs/Fx/Fx.Morph">Morph</a> directly on an element such as element.tween(&#8217;color&#8217;, &#8216;#009900&#8242;) or element.morph(&#8217;.class_name&#8217;). This allows us to also use tween and morph via the double-dollar($$) like:</p>
<pre class="brush: jscript;">
//Using Tween to change the text color in last p tag in the DOM
$$('p:last-child').tween('color', '#009900');

//Using Morph to morph all p tags in the DOM to a class named &quot;large&quot;
$$('p').morph('.large');
</pre>
<p>There are definitely times when we should use the &#8220;each&#8221; array itterator to do several things to each value, but more often than not I see it overused which really complicated the code. And that has a chain reaction that will further make it harder for new users to understand how to use the framework. Mootools has gone to great lengths to allow us to simplify our code and we should be using this shorter code whenever possible.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=TOQP_cDgv_o:ZDjBFhpvMyA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=TOQP_cDgv_o:ZDjBFhpvMyA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=TOQP_cDgv_o:ZDjBFhpvMyA:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/mootools-dom-selector-tips/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Bypassing protected Twitter feeds using PHP</title>
		<link>http://blueprint.intereactive.net/bypassing-protected-twitter-feeds-using-php/</link>
		<comments>http://blueprint.intereactive.net/bypassing-protected-twitter-feeds-using-php/#comments</comments>
		<pubDate>Wed, 31 Dec 2008 15:59:35 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://blueprint.intereactive.net/?p=123</guid>
		<description><![CDATA[I had a little personal project where I needed to combine my wife&#8217;s and my Twitter feed into one common feed. This was so we could display it on our blog and it would show in realtime what we were doing. Not a problem using Yahoo Pipes since our accounts are unprotected and open to [...]]]></description>
			<content:encoded><![CDATA[<p>I had a little personal project where I needed to combine my wife&#8217;s and my <a href="http://twitter.com">Twitter</a> feed into one common feed. This was so we could display it on our blog and it would show in realtime what we were doing. Not a problem using <a href="http://pipes.yahoo.com">Yahoo Pipes</a> since our accounts are unprotected and open to the public. I created a <a href="http://pipes.yahoo.com/pipes/pipe.info?_id=gPhPM9dc3RGKLk4CxEmuhA">simple pipe</a> to combine the feeds and sort by date.</p>
<p>This past week I had another personal project where we have a large music festival with lots of people that will be twittering while the event is going on. Many of them have their account protected (for whatever reason) and short of asking them to unprotect it for the week of the festival, there is no easy way to get access to their feed. I couldn&#8217;t even get access to it for a few days because once you open your feed to the public anyone can see all your history.</p>
<p>What I needed was a way to grab their twitter feed only during the festival so I put my brain in overdrive and shortly after came up with a pretty elegant way of doing it. I had remembered using a script called <a href="http://sourceforge.net/projects/snoopy/">Snoopy</a> that is a PHP class that simulates a web browser. I dug through the Twitter API and found the &#8220;friends_timeline&#8221; call, which is basically a feed of all my friend&#8217;s tweets (what you see on twitter.com/home). I put the 2 together and had the core of a script that would let me login to Twitter and pull the tweets for everyone I follow.</p>
<p>There are two ways to go from here. You could create a dedicated Twitter account and follow just the people you want to display on the overall feed. Or you can create an array of usernames in your code that is used to filter only the ones you want in the overall feed. In my final code I choose to go with the later for simplicity.</p>
<p><strong>Here is the core of what I wrote to pull in the feed via XML</strong></p>
<pre class="brush: php;">
require_once('snoopy.class.php');
$snoopy = new Snoopy;
$snoopy-&gt;agent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)';
$snoopy-&gt;user = 'your_twitter_username';
$snoopy-&gt;pass = 'your_twitter_password';
$snoopy-&gt;fetch('http://twitter.com/statuses/friends_timeline.xml');

// Make sure we connected to the API
if (strpos($snoopy-&gt;response_code, '200')) {
	// Use PHP's SimpleXML functions
	$xml = simplexml_load_string($snoopy-&gt;results);
	foreach($xml-&gt;status as $status) {
		// Do your code here using the format:
		// $status-&gt;id
		// $status-&gt;user-&gt;screen_name
		// etc...
	}
}
</pre>
<p><strong>There are a few things to note:</strong><br />
1) The main thing is that if someone has their Twitter marked as &#8220;protected&#8221;, it is that way for a reason. Be <strong>SURE</strong> you have their permission to pull their tweets only during a set time of your event or whatever you are doing.<br />
2) The Twitter API will only display the latest 20 tweets. To get around this I created a PHP file using the above code and I run it on a Cron Job every 1 minute, dumping the results in a database table. Then I pull from that DB table when I display the feed. Here is the complete file that I use (I added the Snoopy class so it would be self contained): <a href="http://sandbox.intereactive.org/twitter_grab_cron.zip">twitter_grab_cron.zip</a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/intereactive?a=cehrnCB3EdU:fPF3QYGNLCk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/intereactive?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/intereactive?a=cehrnCB3EdU:fPF3QYGNLCk:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/intereactive?i=cehrnCB3EdU:fPF3QYGNLCk:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://blueprint.intereactive.net/bypassing-protected-twitter-feeds-using-php/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
