<?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>DevMoose &#187; Coding</title>
	<atom:link href="http://devmoose.com/category/coding/feed" rel="self" type="application/rss+xml" />
	<link>http://devmoose.com</link>
	<description>DevMoose is a blog dedicated to Web Development and Design that provides articles about new techniques, trends and more to help you grow as a web developer and designer.</description>
	<lastBuildDate>Fri, 20 Aug 2010 07:06:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>10 Awesome CakePHP Tutorials</title>
		<link>http://devmoose.com/coding/10-awesome-cakephp-tutorials</link>
		<comments>http://devmoose.com/coding/10-awesome-cakephp-tutorials#comments</comments>
		<pubDate>Sat, 26 Jun 2010 14:01:43 +0000</pubDate>
		<dc:creator>JP</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[cakephp]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://devmoose.com/?p=522</guid>
		<description><![CDATA[Post tags: <a href="http://devmoose.com/tag/cakephp" rel="tag">cakephp</a>, <a href="http://devmoose.com/tag/php" rel="tag">php</a>Post tags: <a href="http://devmoose.com/tag/cakephp" rel="tag">cakephp</a>, <a href="http://devmoose.com/tag/php" rel="tag">php</a>Tweet Finding decent tutorials for the rapid development PHP framework CakePHP can be a tedious task due to tutorials for this framework being pretty scarce in general. Today I've compiled a list of 10 awesome tutorials for CakePHP that can be useful for beginners to experts. 1. Getting Started With CakePHP CakePHP is an open-source [...]<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/10-awesome-cakephp-tutorials">Permalink</a>
</p>
]]></description>
			<content:encoded><![CDATA[Post tags: <a href="http://devmoose.com/tag/cakephp" rel="tag">cakephp</a>, <a href="http://devmoose.com/tag/php" rel="tag">php</a><p><a href="http://devmoose.com/coding/10-awesome-cakephp-tutorials"><img src="http://devmoose.com/wp-content/uploads/cakephp.jpg" width="610" height="122" title="10 Extremely Useful CakePHP Tutorials"/></a>
</p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://devmoose.com/coding/10-awesome-cakephp-tutorials" data-text="10 Awesome CakePHP Tutorials -" data-count="horizontal" data-via="imjp">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><iframe src="http://www.facebook.com/plugins/like.php?href=http://devmoose.com/coding/10-awesome-cakephp-tutorials&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></p>
<p>Finding decent tutorials for the rapid development PHP framework CakePHP can be a tedious task due to tutorials for this framework being pretty scarce in general.<br />
Today I've compiled a list of 10 awesome tutorials for CakePHP that can be useful for beginners to experts.</p>
<p><span id="more-522"></span></p>
<h3>1. Getting Started With CakePHP</h3>
<p>CakePHP is an open-source framework for PHP intended to make developing, deploying and maintaining applications much easier. CakePHP offers many useful design patterns, such as the Model-View-Controller pattern, seen in other popular frameworks like Ruby On Rails.</p>
<p>This guide will attempt to point you in the right direction so you can get started with CakePHP and eventually develop your own applications using it.</p>
<p><strong>Read the article: </strong><a href="http://net.tutsplus.com/php/getting-started-with-cakephp/">Getting Started With CakePHP</a></p>
<h3>2. How to Bake a New Project in CakePHP</h3>
<p>In this tutorial you'll learn how to make use of CakePHP's "bake" feature to create applications via the command console in a matter of seconds! </p>
<p><strong>Read the article: </strong><a href="http://cakephp.prometsupport.com/2008/learn-how-to-bake-cakephp-app/">How to Bake a New Project in CakePHP</a></p>
<h3>3. Installing CakePHP on Shared Hosting</h3>
<p>I recently installed CakePHP on my hosted web but couldn't get it to work quite right. After a few hours mucking around I've managed to get what I think is the correct installation. Please feel free to comment and correct me where I have made mistakes.</p>
<p><strong>Read the article: </strong><a href="http://bakery.cakephp.org/articles/view/installing-cakephp-on-shared-hosting">Installing CakePHP on Shared Hosting</a></p>
<h3>4. Integrating Facebook Connect with CakePHP</h3>
<p>I wanted to be able to leverage all of the advantages of using Cake’s built in Auth component in my latest application; problem was that the application needed to allow for both normal user accounts and Facebook Connect generated user accounts. I struggled for a while to find the most seamless approach, and then it clicked — dynamically set <code>Auth->fields</code>.</p>
<p><strong>Read the article: </strong><a href="http://cutfromthenorth.com/integrating-facebook-connect-with-cakephps-auth-component/">Integrating Facebook Connect with CakePHP’s Auth component</a></p>
<h3>5. CakePHP URL Shortener Service Tutorial</h3>
<p>If you have just woken up from a 10 year long coma, you might realise that the internet has been dumbed down to 140 characters and services that offer “URL Shortening” are quite widely used. The writer of this tutorial will show you how to create your very own URL Shortener Service using CakePHP like bit.ly or owl.ly to shorten URLs so you can insert them to fit within your 140 chars max tweets. </p>
<p><strong>Read the article: </strong><a href="http://www.jotlab.com/2009/08/26/cakephp-url-shortener-service-tutorial/">CakePHP URL Shortener Service Tutorial</a></p>
<h3>6. Create a DVD Catalog App using CakePHP</h3>
<p>This is the first article in a series that James Fairhurst will use to document the process of creating a fully featured web application in CakePHP. All of the series are available on his website to make this awesome app.</p>
<p><strong>Read the article: </strong><a href="http://www.jamesfairhurst.co.uk/posts/view/full_cakephp_application_part_1">Create a DVD Catalog Application using CakePHP</a></p>
<h3>7. Build a Photo Gallery Using CakePHP and Flickr</h3>
<p>Want to share your Flickr photostream with the world, but only once you've given it a nice, customized touch? Look no further than CakePHP -- and a few lines of code -- to pull off some magic! In this article, we'll use the Flickr API and CakePHP to take the images we've loaded onto Flickr and use them to build our own, non-Flickr web gallery.</p>
<p><strong>Read the article: </strong><a href="http://articles.sitepoint.com/article/photo-gallery-cakephp-flickr">Build a Photo Gallery Using CakePHP and Flickr</a></p>
<h3>8. File uploader with CakePHP</h3>
<p>An all around general purpose file uploader for CakePHP. Packaged as a stand alone plugin with file validation, file scanning and support for a wide range of basic mime types.</p>
<p><strong>Class Features:</strong></p>
<ul>
<li>Automatically sets all ini settings required for file uploading</li>
<li>Support for a wide range of mime types: text, images, archives, audio, video, application</li>
<li>Logs all internal errors that can be retrieved and displayed</li>
<li>and many more...</li>
</ul>
<p><strong>Read the article: </strong><a href="http://www.milesj.me/resources/script/uploader-plugin">File upload with CakePHP</a></p>
<h3>9. CakePHP RSS Feed Datasource</h3>
<p>We are releasing our RSS datasource to CakePHP developers for CakePHP Development.  We know there are others out there, but what we like about ours is that it supports the following:</p>
<ul>
<li>Built-in Pagination</li>
<li>Sorting</li>
<li>Content filtering</li>
</ul>
<p><strong>Read the article: </strong><a href="http://blog.loadsys.com/2009/06/19/cakephp-rss-feed-datasource/"><strong>Read the article: </strong>CakePHP RSS Feed Datasource</a></p>
<h3>10. Creating PDF files with CakePHP and TCPDF</h3>
<p>With CakePHP 1.2 creating PDFs with CakePHP has just gotten a lot easier. This tutorial shows how to combine CakePHP and the powerful TCPDF for easy PDF file creation.</p>
<p><strong>Read the article: </strong><a href="http://bakery.cakephp.org/articles/view/creating-pdf-files-with-cakephp-and-tcpdf">Creating PDF files with CakePHP and TCPDF</a></p>
<p>
<h4>Free CakePHP eBook</h4>
<p><a href="http://www.pseudocoder.com/Super_Awesome_Advanced_CakePHP_Tips.pdf">Super Awesome Advanced CakePHP Tips</a></p>
<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/10-awesome-cakephp-tutorials">Permalink</a>
</p>
]]></content:encoded>
			<wfw:commentRss>http://devmoose.com/coding/10-awesome-cakephp-tutorials/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Automatically Create a Bit.ly URL for WordPress Posts</title>
		<link>http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts</link>
		<comments>http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts#comments</comments>
		<pubDate>Fri, 22 Jan 2010 15:21:23 +0000</pubDate>
		<dc:creator>JP</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[tutorials]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://devmoose.com/?p=335</guid>
		<description><![CDATA[Post tags: <a href="http://devmoose.com/tag/php" rel="tag">php</a>, <a href="http://devmoose.com/tag/tutorials" rel="tag">tutorials</a>, <a href="http://devmoose.com/tag/wordpress" rel="tag">wordpress</a>Post tags: <a href="http://devmoose.com/tag/php" rel="tag">php</a>, <a href="http://devmoose.com/tag/tutorials" rel="tag">tutorials</a>, <a href="http://devmoose.com/tag/wordpress" rel="tag">wordpress</a>Tweet Bit.ly is currently the most popular URL shorting service out there and for a good reason too. With bit.ly you can track your shortened URLs and much more. In this article I'm going to show you how to use bit.ly's api create bit.ly urls automatically for WordPress posts. In order to make use of [...]<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts">Permalink</a>
</p>
]]></description>
			<content:encoded><![CDATA[Post tags: <a href="http://devmoose.com/tag/php" rel="tag">php</a>, <a href="http://devmoose.com/tag/tutorials" rel="tag">tutorials</a>, <a href="http://devmoose.com/tag/wordpress" rel="tag">wordpress</a><p><a href="http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts"><img src="http://img.devmoose.s3.amazonaws.com/articles/bitly.jpg" alt="Automatically Create a Bit.ly URL for WordPress Posts" width="610" height="150"/></a></p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts" data-text="Automatically Create a Bit.ly URL for WordPress Posts -" data-count="horizontal" data-via="imjp">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><iframe src="http://www.facebook.com/plugins/like.php?href=http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></p>
<p>
Bit.ly is currently the most popular URL shorting service out there and for a good reason too. With bit.ly you can track your shortened URLs and much more. In this article I'm going to show you how to use bit.ly's api create bit.ly urls automatically for WordPress posts.
</p>
<p><span id="more-335"></span></p>
<p>In order to make use of Bit.ly's API, you'll need to:</p>
<ol>
<li><a href="http://bit.ly/">Signup at Bit.ly</a>
<li><a href="http://bit.ly/account/your_api_key/">Get your API Key</a>
</ol>
<p>Now that you have a login and API key, open your WordPress theme's functions.php (just create one if you don't have one) and paste the following code at the top of the document:</p>
<pre class="brush: php">
//create bit.ly url
function bitly()
{
	//login information
	$url = get_permalink();  //generates wordpress' permalink
	$login = 'imjp';	//your bit.ly login
	$apikey = 'R_11882237eac772b5d6126e895a06c43f'; //bit.ly apikey
	$format = 'json';	//choose between json or xml
	$version = '2.0.1';

	//create the URL
	$bitly = 'http://api.bit.ly/shorten?version='.$version.'&#038;longUrl='.urlencode($url).'&#038;login='.$login.'&#038;apiKey='.$apikey.'&#038;format='.$format;

	//get the url
	//could also use cURL here
	$response = file_get_contents($bitly);

	//parse depending on desired format
	if(strtolower($format) == 'json')
	{
		$json = @json_decode($response,true);
		echo $json['results'][$url]['shortUrl'];
	}
	else //xml
	{
		$xml = simplexml_load_string($response);
		echo 'http://bit.ly/'.$xml->results->nodeKeyVal->hash;
	}
}
</pre>
<p>The code above is pretty much self explanatory.<br />
<em>Don't forget to change the <strong>login</strong> and <strong>apikey</strong> strings to match yours.</em></p>
<p>I've modified <a href="http://davidwalsh.name/bitly-php">David Walsh's "Create Bit.ly Short URLs Using PHP"</a> in order to generate bit.ly urls automatically with WordPress. Now you can display your bit.ly url anywhere inside the loop or post .</p>
<p>The result of <code>&lt;?php bitly(); ?&gt;</code> in this post is <strong>http://bit.ly/4UbQ66</strong>.</p>
<p>I hope you guys found this article useful <code>:D</code>!
</p>
<p><span class="related"></p>
<h4>Related Articles</h4>
<p><ul>
	<li><a title="Getting the Most Out of Your Blog&#8217;s RSS Feed" href="http://devmoose.com/blogging/get-the-most-out-of-your-blogs-rss-feed">Getting the Most Out of Your Blog&#8217;s RSS Feed</a></li>

	<li><a title="10 Awesome CakePHP Tutorials" href="http://devmoose.com/coding/10-awesome-cakephp-tutorials">10 Awesome CakePHP Tutorials</a></li>

	<li><a title="10 Basic SEO Tips Every Web Developer Should Follow" href="http://devmoose.com/blogging/10-basic-seo-tips-every-web-developer-should-follow">10 Basic SEO Tips Every Web Developer Should Follow</a></li>

	<li><a title="20+ .htaccess Hacks Every Web Developer Should Know About" href="http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about">20+ .htaccess Hacks Every Web Developer Should Know About</a></li>
</ul>
<br />
</span></p>
<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts">Permalink</a>
</p>
]]></content:encoded>
			<wfw:commentRss>http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>20+ .htaccess Hacks Every Web Developer Should Know About</title>
		<link>http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about</link>
		<comments>http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about#comments</comments>
		<pubDate>Fri, 22 Jan 2010 13:00:06 +0000</pubDate>
		<dc:creator>JP</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[htaccess]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[tweaks]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://devmoose.com/?p=289</guid>
		<description><![CDATA[Post tags: <a href="http://devmoose.com/tag/htaccess" rel="tag">htaccess</a>, <a href="http://devmoose.com/tag/performance" rel="tag">performance</a>, <a href="http://devmoose.com/tag/security" rel="tag">security</a>, <a href="http://devmoose.com/tag/seo" rel="tag">seo</a>, <a href="http://devmoose.com/tag/tweaks" rel="tag">tweaks</a>, <a href="http://devmoose.com/tag/wordpress" rel="tag">wordpress</a>Post tags: <a href="http://devmoose.com/tag/htaccess" rel="tag">htaccess</a>, <a href="http://devmoose.com/tag/performance" rel="tag">performance</a>, <a href="http://devmoose.com/tag/security" rel="tag">security</a>, <a href="http://devmoose.com/tag/seo" rel="tag">seo</a>, <a href="http://devmoose.com/tag/tweaks" rel="tag">tweaks</a>, <a href="http://devmoose.com/tag/wordpress" rel="tag">wordpress</a>Tweet Apache's .htaccess(hypertext access) configuration file can be a very powerful tool in a web developer's toolkit if used properly. It can be found in the webroot of your server and can be easily edited using any text editor. In this article I'm going to show you 20 .htaccess hacks and how to use them. [...]<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about">Permalink</a>
</p>
]]></description>
			<content:encoded><![CDATA[Post tags: <a href="http://devmoose.com/tag/htaccess" rel="tag">htaccess</a>, <a href="http://devmoose.com/tag/performance" rel="tag">performance</a>, <a href="http://devmoose.com/tag/security" rel="tag">security</a>, <a href="http://devmoose.com/tag/seo" rel="tag">seo</a>, <a href="http://devmoose.com/tag/tweaks" rel="tag">tweaks</a>, <a href="http://devmoose.com/tag/wordpress" rel="tag">wordpress</a><p><a href="http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about"><img src="http://img.devmoose.s3.amazonaws.com/articles/htaccess.jpg" width="610" height="150" alt="20+ .htaccess Hacks Every Web Developer Should Know About"/></a></p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about" data-text="20+ .htaccess Hacks Every Web Developer Should Know About -" data-count="horizontal" data-via="imjp">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><iframe src="http://www.facebook.com/plugins/like.php?href=http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></p>
<p>Apache's .htaccess(hypertext access) configuration file can be a very powerful tool in a web developer's toolkit if used properly. It can be found in the webroot of your server and can be easily edited using any text editor. In this article I'm going to show you 20 .htaccess hacks and how to use them.</p>
<p><span id="more-289"></span></p>
<p>
Before I start with this article I'd like to start by saying that abusing the .htaccess file will hurt the performance of your website. The .htaccess file should only be used if you have no other way to achieve certain things.</p>
<p><strong><em>Make sure to back up your current .htaccess file before applying any of the following hacks.</em></strong>
</p>
<h3>1. Prevent Hotlinking</h3>
<p>Tired of people using your bandwidth by putting the images hosted on your server on their website? Add the following code at the bottom of your .htaccess file to prevent hotlinking.</p>
<pre class="brush: css">
Options +FollowSymlinks
#Protect against hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?domainname.com/ [nc]
RewriteRule .*.(gif|jpg|png)$ http://domainname.com/img/stop_stealing_bandwidth.gif[nc]
</pre>
<p><strong>NOTE:</strong> The following article explains better methods to "prevent" hotlinking:<br />
<a href="http://www.polepositionmarketing.com/seo-sem/link-building-secrets/maurizio-petrone.php">Link building secrets by Maurizio Petrone</a>
</p>
<h3>2. Block All Requests From User Agents</h3>
<p>It's possible to block all unwanted user agents that might be potentially harmful or perhaps just to keep the server load as low as possible.</p>
<pre class="brush: css">
#Block bad bots
SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
SetEnvIfNoCase user-Agent ^Microsoft.URL [NC,OR]
SetEnvIfNoCase user-Agent ^MSFrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Offline.Explorer [NC,OR]
SetEnvIfNoCase user-Agent ^[Ww]eb[Bb]andit [NC,OR]
SetEnvIfNoCase user-Agent ^Zeus [NC]
<Limit GET POST HEAD>
Order Allow,Deny
Allow from all
Deny from env=bad_bot
</Limit>
</pre>
</p>
<h3>3. Redirect Everyone Except Specified IPs</h3>
<p>If for some reason you would want to deny everyone or allow only a specific group of IP addresses to access your website, add the following code to your .htaccess file:</p>
<pre class="brush: css">
ErrorDocument 403 http://www.domainname.com
Order deny,allow
Deny from all
Allow from 124.34.48.165
Allow from 102.54.68.123
</pre>
</p>
<h3>4. SEO Friendly 301 Redirects</h3>
<p>If you've transferred domain names or wish to redirect a specific page or pages without getting penalty from search engines such as Google, use the following code:</p>
<pre class="brush: css">
Redirect 301 /d/file.html http://www.domainname.com/r/file.html
</pre>
</p>
<h3>5. Creating a Custom Error Page</h3>
<p>Are you as tired as me of the default layout of 404 error pages? Well now you can easily create your own and refer to it like this:</p>
<pre class="brush: css">
ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 404 /error/404.php
ErrorDocument 500 /error/500.php
</pre>
</p>
<h3>6. Create an IP Banlist</h3>
<p>Tired of getting the same bs comments specific user over and over again? Just ban the bastard like this by adding the following code to your .htaccess file:</p>
<pre class="brush: css">
allow from all
deny from 145.186.14.122
deny from 124.15
</pre>
</p>
<h3>7. Set Default Email Address For Server Admin</h3>
<p>Using the following code you can specify the default email address for the server's admin.</p>
<pre class="brush: css">
ServerSignature EMail
SetEnv SERVER_ADMIN default@domain.com
</pre>
</p>
<h3>8. Disable Display of Download Request</h3>
<p>Usually when downloading something from a web site, you'll be prompted if you wish to open the file or save it on your hard-disk. To prevent the server from prompting users wether they wish to open or save the file and to just save the file, use the following code:</p>
<pre class="brush: css">
AddType application/octet-stream .pdf
AddType application/octet-stream .zip
AddType application/octet-stream .mov
</pre>
</p>
<h3>9. Protect a Specific File</h3>
<p>The following code allows you to deny access to any file you wish by throwing an 403 error when it is trying to be accessed. In the following example I've chosen to protect the .htaccess file by adding an extra layer of security.</p>
<pre class="brush: css">
#Protect the .htaccess File
<Files .htaccess>
order allow,deny
deny from all
</Files>
</pre>
</p>
<h3>10. Compress Components With mod_deflate</h3>
<p>As an alternative to compressing files with Gzip, you can use mod_deflate(which is supposively faster). Place the following code at the top of your .htaccess file(tip: you can also add .jpg|.gif|.png|.tiff|.ico mod_deflate those):</p>
<pre class="brush: css">
<IfModule mod_deflate.c>
<FilesMatch ".(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
</pre>
</p>
<h3>11. Add Expires Headers</h3>
<p>The following code shows you how to add an expiration date on the headers.</p>
<pre class="brush: css">
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Expires "Wed, 21 May 2010 20:00:00 GMT"
</FilesMatch>
</pre>
</p>
<h3>12. Setting the Default Page</h3>
<p>You can set the default page of a directory to the page of your choice. For example in this code the default page is set as about.html instead of index.html</p>
<pre class="brush: css">
#Serve Alternate Default Index Page
DirectoryIndex about.html
</pre>
</p>
<h3>13. Password Protect Your Directories and Files </h3>
<p>You can enable password authentication for any directory or file on your server by using the following code:</p>
<pre class="brush: css">
#password-protect a file
<Files secure.php>
AuthType Basic
AuthName "Prompt"
AuthUserFile /home/path/.htpasswd
Require valid-user
</Files>

# password-protect a directory
resides
AuthType basic
AuthName "This directory is protected"
AuthUserFile /home/path/.htpasswd
AuthGroupFile /dev/null
Require valid-user
</pre>
</p>
<h3>14. Redirect an Old Domain to a New Domain</h3>
<p>By using the .htaccess file you can redirect a old domain name to a new domain by adding the following code into the htaccess file. Basically what it does is it will remap the old domain to the new one.</p>
<pre class="brush: css">
#Redirect from an old domain to a new domain
RewriteEngine On
RewriteRule ^(.*)$ http://www.domainname.com/$1 [R=301,L]
</pre>
</p>
<h3>15. Force Caching</h3>
<p>The following code will not directly increase the loading speed of your website. What it will do is, load the content of your site faster when the same user revisits your website by sending 304 status when requested components have not been modified. You can change the cache expiry by changing the number of seconds(it's currently set at 1 day).</p>
<pre class="brush: css">
FileETag MTime Size
ExpiresActive on
ExpiresDefault "access plus 86400 seconds"
</pre>
</p>
<h3>16. Compress Components By Enabling Gzip</h3>
<p>By making use of Gzip you can compress files in order to make your website load faster.</p>
<pre class="brush: css">
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</pre>
</p>
<h3>17. Remove "category" from a URL</h3>
<p>To transform this url: http://yourdomain.com/category/blue to -> http://yourdomain.com/blue, just add the following code at the bottom of your .htaccess file.</p>
<pre class="brush: css">
RewriteRule ^category/(.+)$ http://www.yourdomain.com/$1 [R=301,L]
</pre>
</p>
<h3>18. Disable Directory Browsing</h3>
<p>To prevent people from accessing any directories that might contain valueble information or reveal security weaknesses(e.g. plugin directories of wordpress), add the following code to your .htacess file:</p>
<pre class="brush: css">
Options All -Indexes
</pre>
</p>
<h3>19. Redirect WordPress Feeds to FeedBurner</h3>
<p>The following snippet redirects WordPress' default RSS feed feedburner's feed. </p>
<pre class="brush: css">
#Redirect wordpress content feeds to feedburner
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/yourfeed [R=302,NC,L]
</IfModule>
</pre>
</p>
<h3>20.  Deny Comments from No Referrer Requests</h3>
<p>The problem is that bots just post comments about how to increase your private parts all naturally to your blogs without coming from any other site. It's like they fall from the sky. This neat hack prevents people from posting if they did not come from somewhere else(they can comment just fine if they came from e.g. google).</p>
<pre class="brush: css">
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourblog.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</pre>
<p>Source: <a href="http://www.wprecipes.com/how-to-deny-comment-posting-to-no-referrer-requests">How to: Deny comment posting to no referrer requests</a>
</p>
<h3>21. Remove File Extension From URL</h3>
<p>Thanks to <a href="http://www.eclipsedesign.eu/">Kartlos Tchavelachvili</a> for this one. What the following code does is, it removes the .php extension(you can change it to whatever you like e.g. html) in a url. It makes the URL prettier &#038; SEO friendlier.</p>
<pre class="brush: css">
RewriteRule ^(([^/]+/)*[^.]+)$ /$1.php [L]
</pre>
</p>
<h3>22. Remove www from URL</h3>
<p>Thanks to <a href="http://23rdworld.com/">Mahalie</a> for the following 2 .htaccess codes.<br />
If you wish to take out the www from your website's URL and transform it from http://www.example.com into http://example.com, add the following to your .htaccess.</p>
<pre class="brush: css">
#remove www from URI
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.domain\.com$ [NC]
RewriteRule ^(.*)$ http://domain.com/$1 [L,R=301]
</pre>
</p>
<h3>23. Add Trailing Slash to URL</h3>
<p>Some search engines remove the trailing slash from urls that look like directories - e.g. Yahoo does it. But - it could result into duplicated content problems when the same page content is accessible under different urls. The following code makes sure there's a slash at the end of your URL:</p>
<pre class="brush: css">
#trailing slash enforcement
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !#
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ http://domain.com/$1/ [L,R=301]
</pre>
</p>
<h3>24. Remove the www. from your website's URL</h3>
<p>Below I've provided a simple htaccess snippet to forcefully remove the "www" from your website's URL.</p>
<pre class="brush: css">
# Redirect if www.yourdomain.com to yourdomain.com
RewriteCond %{HTTP_HOST} ^www\.example\.com [NC]
RewriteRule (.*) http://example.com/$1 [R=301,L]
</pre>
<h4>More articles about .htaccess:</h4>
<ul>
<li><a href="http://muffinresearch.co.uk/archives/2008/04/07/avoiding-the-use-of-htaccess-for-performance/">Avoiding the use of .htaccess for performance</a></li>
<li><a href="http://www.javascriptkit.com/howto/htaccess.shtml">Comprehensive guide to .htaccess</a></li>
<li><a href="http://perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/">Stupid htaccess Tricks</a></li>
</ul>
<p><span class="related"></p>
<h4>Related Articles</h4>
<p><ul>
	<li><a title="10 Basic SEO Tips Every Web Developer Should Follow" href="http://devmoose.com/blogging/10-basic-seo-tips-every-web-developer-should-follow">10 Basic SEO Tips Every Web Developer Should Follow</a></li>

	<li><a title="10 Ways to Instantly Speed Up Your Website" href="http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website">10 Ways to Instantly Speed Up Your Website</a></li>

	<li><a title="Getting the Most Out of Your Blog&#8217;s RSS Feed" href="http://devmoose.com/blogging/get-the-most-out-of-your-blogs-rss-feed">Getting the Most Out of Your Blog&#8217;s RSS Feed</a></li>

	<li><a title="Automatically Create a Bit.ly URL for WordPress Posts" href="http://devmoose.com/coding/automatically-create-a-bitly-url-for-wordpress-posts">Automatically Create a Bit.ly URL for WordPress Posts</a></li>
</ul>
<br />
</span></p>
<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about">Permalink</a>
</p>
]]></content:encoded>
			<wfw:commentRss>http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about/feed</wfw:commentRss>
		<slash:comments>61</slash:comments>
		</item>
		<item>
		<title>6 Useful jQuery 1.4 Resources</title>
		<link>http://devmoose.com/coding/6-useful-jquery-1-4-resources</link>
		<comments>http://devmoose.com/coding/6-useful-jquery-1-4-resources#comments</comments>
		<pubDate>Fri, 15 Jan 2010 03:37:49 +0000</pubDate>
		<dc:creator>JP</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://devmoose.com/?p=216</guid>
		<description><![CDATA[Post tags: <a href="http://devmoose.com/tag/javascript" rel="tag">javascript</a>, <a href="http://devmoose.com/tag/jquery" rel="tag">jquery</a>Post tags: <a href="http://devmoose.com/tag/javascript" rel="tag">javascript</a>, <a href="http://devmoose.com/tag/jquery" rel="tag">jquery</a>Tweet Celebrating jQuery 4th birthday, the jQuery team has released jQuery 1.4 today! The new release is packed with new features, enhancements and performance increases. So, in order to spread jQuery 1.4 awareness, I've compiled a list of 6 useful jQuery 1.4 resources to help you get familiar with the new version. The jQuery team [...]<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/6-useful-jquery-1-4-resources">Permalink</a>
</p>
]]></description>
			<content:encoded><![CDATA[Post tags: <a href="http://devmoose.com/tag/javascript" rel="tag">javascript</a>, <a href="http://devmoose.com/tag/jquery" rel="tag">jquery</a><p><a href="http://devmoose.com/category/coding/6-useful-jquery-1-4-resources"><img src="http://img.devmoose.s3.amazonaws.com/articles/jQuery_1.4.jpg" alt="6 Useful jQuery 1.4 Resources"/></a></p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://devmoose.com/coding/6-useful-jquery-1-4-resources" data-text="6 Useful jQuery 1.4 Resources -" data-count="horizontal" data-via="imjp">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><iframe src="http://www.facebook.com/plugins/like.php?href=http://devmoose.com/coding/6-useful-jquery-1-4-resources&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></p>
<p>Celebrating jQuery 4th birthday, the jQuery team has released jQuery 1.4 today!<br />
The new release is packed with new features, enhancements and performance increases. So, in order to spread jQuery 1.4 awareness, I've compiled a list of 6 useful jQuery 1.4 resources to help you get familiar with the new version.</p>
<p><em>The jQuery team is also accepting <a href="http://jquery14.com/donate">donations</a> and giving free jQuery eBooks for those who donate more than $20.</em></p>
<p><span id="more-216"></span></p>
<h3>1. jQuery 1.4 Released</h3>
<p>This article was made to announce the release of jQuery 1.4 and to celebrate jQuery 4th birthday. Here they'll give you a quick tour some of the things that have been changed or added and how to use them properly.</p>
<p><strong>Go To Article: <a href="http://jquery14.com/day-01/jquery-14">jQuery 1.4 Released</a></strong></p>
<h3>2. The 15 New jQuery 1.4 Features you Must Know</h3>
<p>Right after the release of jQuery 1.4, <a href="http://net.tutsplus.com/">net.tutsplus.com</a> has released a tutorial about some of the new features. In this tutorial, <a href="http://james.padolsey.com/">James Padolsey</a> goes through 15 new features of jQuery 1,4 and explains how to use every single one of them.</p>
<p><strong>Go To Article: <a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/">jQuery 1.4 Released: The 15 New Features you Must Know</a></strong></p>
<h3>3. How jQuery 1.4 Fixed Live Methods</h3>
<p>In this article Neeraj goes through some of the events that were not supported by live methods in jQuery 1.3.2 like blur, focus, mouseenter, mouseleave, change and submit and how they were fixed by the jQuery team for the release of jQuery 1.4.</p>
<p><strong>Go To Article: <a href="http://www.neeraj.name/blog/articles/893">How jQuery 1.4 fixed rest of live methods</a></strong></p>
<h3>4. jQuery 1.4 Improves Code and Solves IE Issues</h3>
<p>The guys over at dzone.com go through the steps the jQuery team took in order to make its code less complex and the issues jQuery 1.3.2 had with event bubbling in internet explorer.</p>
<p><strong>Go To Article: <a href="http://css.dzone.com/articles/jquery-14-improves-code-and">jQuery 1.4 Improves Code and Solves IE Issues</a></strong></p>
<h3>5. Easing in jQuery 1.4</h3>
<p>James Padolsey explains how to make use of the possibility of defining an easier function for each property that you're animating in jQuery 1.4.</p>
<p><strong>Go To Article: <a href="http://james.padolsey.com/javascript/easing-in-jquery-1-4a2/">Easing in jQuery 1.4</a></strong></p>
<h3>6. jQuery 1.4 API Cheat Sheet</h3>
<p>A cheat sheet for the latest release of jQuery that is available in html, pdf and jpeg.</p>
<p><strong>Go To Article: <a href="http://futurecolors.ru/jquery/">jQuery 1.4 API Cheat Sheet</a></strong></p>
<p><span class="related"></p>
<h4>Related Articles</h4>
<p><ul>
	<li>No related posts found</li>
</ul>
<br />
</span></p>
<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/6-useful-jquery-1-4-resources">Permalink</a>
</p>
]]></content:encoded>
			<wfw:commentRss>http://devmoose.com/coding/6-useful-jquery-1-4-resources/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>6 CSS Tutorials That Take You From Beginner to Expert</title>
		<link>http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert</link>
		<comments>http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert#comments</comments>
		<pubDate>Thu, 14 Jan 2010 02:39:01 +0000</pubDate>
		<dc:creator>JP</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css3]]></category>

		<guid isPermaLink="false">http://devmoose.com/?p=159</guid>
		<description><![CDATA[Post tags: <a href="http://devmoose.com/tag/css" rel="tag">css</a>, <a href="http://devmoose.com/tag/css3" rel="tag">css3</a>Post tags: <a href="http://devmoose.com/tag/css" rel="tag">css</a>, <a href="http://devmoose.com/tag/css3" rel="tag">css3</a>Tweet In today's world wide web, CSS is the most used method of styling websites. The use of tables is now mostly a thing of the past, even though you might still come across old websites once in a while that use tables for layout once in a while. There are tons of reasons why [...]<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert">Permalink</a>
</p>
]]></description>
			<content:encoded><![CDATA[Post tags: <a href="http://devmoose.com/tag/css" rel="tag">css</a>, <a href="http://devmoose.com/tag/css3" rel="tag">css3</a><p><a href="http://devmoose.com/coding/6-css-tutorials-to-take-you-from-a-beginner-to-advanced"><img src="http://img.devmoose.s3.amazonaws.com/articles/css.jpg" class="introPic" title="10 CSS Tutorials to Take You From a Beginner to an Expert" width="610" height="170"/></a></p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert" data-text="6 CSS Tutorials That Take You From Beginner to Expert -" data-count="horizontal" data-via="imjp">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><iframe src="http://www.facebook.com/plugins/like.php?href=http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></p>
<p>In today's world wide web, <strong>CSS</strong> is <em>the most</em> used method of styling websites. The use of tables is now mostly a thing of the past, even though you might still come across old websites once in a while that use tables for layout once in a while. There are tons of reasons why one should use CSS to layout a website over any other method.</p>
<p>With millions of websites being created every month, knowing how to create a website in today's world is becoming almost as important as knowing how to drive a car. In this article I will show you 6 tutorials you need to go through in order to go from knowing absolutely nothing about CSS, to writing advanced CSS code.</p>
<p><span id="more-159"></span></p>
<h3>1. The Very Basics of CSS</h3>
<p><img src="http://img.devmoose.s3.amazonaws.com/articles/basics_of_css.jpg" title="The Basics of CSS" width="610" height="109"/></p>
<p>To learn <strong>the very basics of CSS</strong> there is no better resource out there than <a href="http://www.w3schools.com/css/css_intro.asp">w3schools' CSS tutorials</a>. Here they explain CSS' syntax and show you about all its selectors, properties and values.</p>
<p>It's definitely worth it to check them out because they provide awesome tutorials for other languages like PHP, JavaScript, and more!</p>
<p><strong>Go To Article: <a href="http://www.w3schools.com/css/css_intro.asp">CSS Introduction</a></strong></p>
<h3>2. Mastering the Basics of CSS</h3>
<p>In this article, Soh Tanaka thoroughly explains <a href="http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/">how the most important elements CSS work</a>. This article is perfect for those who kinda know the very basics of CSS but don't understand them 100%.</p>
<p><img src="http://img.devmoose.s3.amazonaws.com/articles/mastering_css_basics.gif" width="500" height="265" style="border: none;" title="Mastering the Basics of CSS"/><br />
<br />
<strong>Go To Article: <a href="http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/">Mastering CSS Coding: Getting Started</a></strong></p>
<h3>3. Creating a CSS Layout From Scratch</h3>
<p>Once you have basic understanding of CSS works, it's time to learn <a href="http://www.subcide.com/tutorials/csslayout/" target="_blank>how to create a CSS layout from scratch</a>(without using tables!). This tutorial assumes that you understand the basics of CSS, so in order to follow it, I recommend you going through <a href="http://www.w3schools.com/css/css_intro.asp">w3schools' basic CSS tutorials</a> before going through this one.<br />
In this tutorial <strong>Steve Dennis</strong> takes you step by step how to effectively use the CSS float property, create a CSS navigation menu and much more.</p>
<p><img src="http://img.devmoose.s3.amazonaws.com/articles/css_layout_from_scratch.jpg" title="CSS Theme From Scratch" width="610" height="262"/></p>
<p>So if you've always wondered how to create a website from scratch using CSS, this is <em>the</em> tutorial to read!</p>
<p><strong>Go To Article: <a href="http://www.subcide.com/tutorials/csslayout/">Creating a CSS layout from scratch</a></strong></p>
<h3>4. CSS Snippets to Save Time and Effort</h3>
<p><img src="http://img.devmoose.s3.amazonaws.com/articles/useful_css_snippets.jpg" width="610" height="152" title="Useful CSS Snippets"/></p>
<p>This list of <a href="http://www.blogohblog.com/10-css-snippets-to-save-precious-time/">CSS Code Snippets</a> has been created to save us time and effort since these type of snippets shown in this tutorial might be useful when developing a new theme.</p>
<p><strong>Go To Article: <a href="http://www.blogohblog.com/10-css-snippets-to-save-precious-time/">10 CSS Snippets to Save Precious Time</a></strong></p>
<h3>5. Advanced CSS Techniques</h3>
<p>If you're interested to further enhance your CSS skills, you might want to take a look at this list of <a href="http://net.tutsplus.com/tutorials/html-css-techniques/10-challenging-but-awesome-css-techniques/">10 Challenging But Awesome CSS Techniques</a> to add some more spice to your CSS design.</p>
<p><img src="http://img.devmoose.s3.amazonaws.com/articles/advanced_css_techniques.jpg" width="610" height="363" style="border: none;" title="Blurred Menu"/><br />
<br />
<strong>Go To Article: <a href="http://net.tutsplus.com/tutorials/html-css-techniques/10-challenging-but-awesome-css-techniques/">10 Challenging But Awesome CSS Techniques</a></strong></p>
<h3>6. The Future of CSS</h3>
<p>The future of CSS lies in CSS3. Unfortunately, around <strong><a href="http://www.w3schools.com/browsers/browsers_stats.asp">25%</a></strong> of the internet users cannot see CSS3 attributes yet because they're using old browsers like Internet Explorer 6 and 7.</p>
<blockquote><p>It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.</p></blockquote>
<p><img src="http://img.devmoose.s3.amazonaws.com/articles/future_of_css.jpg" title="The Future of CSS" width="610" height="205"/><br />
<br />
<strong>Go To Article: <a href="http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/">Take Your Design To The Next Level With CSS3</a></strong></p>
<p></p>
<h4>Resources for Further Developing Your CSS Skills</h4>
<ul>
<li><a href="http://smashingmagazine.com/tag/css/">SmashingMagazine</a></li>
<li><a href="http://css-tricks.com/">CSS-Tricks</a></li>
<li><a href="http://sixrevisions.com/css">Six Revisions</a></li>
<li><a href="http://noupe.com/css">Noupe</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/resources-search/567b61df983282ee5af15b2d420d730a/">CSS Drive</a></li>
</ul>
<p><span class="related"></p>
<h4>Related Articles</h4>
<p><ul>
	<li><a title="10 Ways to Instantly Speed Up Your Website" href="http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website">10 Ways to Instantly Speed Up Your Website</a></li>
</ul>
<br />
</span></p>
<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert">Permalink</a>
</p>
]]></content:encoded>
			<wfw:commentRss>http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>10 Ways to Instantly Speed Up Your Website</title>
		<link>http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website</link>
		<comments>http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website#comments</comments>
		<pubDate>Tue, 12 Jan 2010 06:36:12 +0000</pubDate>
		<dc:creator>JP</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[tweaks]]></category>

		<guid isPermaLink="false">http://devmoose.com/?p=101</guid>
		<description><![CDATA[Post tags: <a href="http://devmoose.com/tag/css" rel="tag">css</a>, <a href="http://devmoose.com/tag/performance" rel="tag">performance</a>, <a href="http://devmoose.com/tag/tweaks" rel="tag">tweaks</a>Post tags: <a href="http://devmoose.com/tag/css" rel="tag">css</a>, <a href="http://devmoose.com/tag/performance" rel="tag">performance</a>, <a href="http://devmoose.com/tag/tweaks" rel="tag">tweaks</a>Tweet Optimizing the performance of a website is often neglected by web developers due to laziness or just not knowing what can be done to speed up their website. One thing most developers don't realize is that if a page is taking too long to load, allot of users will leave the site before the [...]<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website">Permalink</a>
</p>
]]></description>
			<content:encoded><![CDATA[Post tags: <a href="http://devmoose.com/tag/css" rel="tag">css</a>, <a href="http://devmoose.com/tag/performance" rel="tag">performance</a>, <a href="http://devmoose.com/tag/tweaks" rel="tag">tweaks</a><p><a href="http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website"><img src="http://img.devmoose.s3.amazonaws.com/articles/speed.jpg" alt="10 Ways to Instantly Speed Up Your Website" width="610" height="129" /></br></a></p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website" data-text="10 Ways to Instantly Speed Up Your Website -" data-count="horizontal" data-via="imjp">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><iframe src="http://www.facebook.com/plugins/like.php?href=http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></p>
<p>Optimizing the performance of a website is often neglected by web developers due to laziness or just not knowing what can be done to speed up their website. One thing most developers don't realize is that if a page is taking too long to load, allot of users will leave the site before the page is finished loading.</p>
<p>Today there are probably over 100 ways to improve the performance of a website. In this article I will show you simple 10 things you can do in less than an hour to speed up your website and see amazing results instantly.</p>
<p><span id="more-101"></span></p>
<h3>1. Minimize HTTP Requests</h3>
<p>When loading up a new website, the majority of the time is spent loading the website's components: <em>images, stylesheets, scripts, Flash, etc</em>.  One thing to keep in mind is that when transferring data over the internet, we have to deal with things like latency, bandwidth, etc. By having fewer components to load will reduce the number of HTTP Requests, which in turn makes your website load faster.</p>
<h4>Make use of CSS Sprites</h4>
<p>If you've heard about <strong>CSS Sprites</strong> but don't know what they are or how they work, you'll learn this now.<br />
The idea of CSS Sprites is basically to combine all images of the same type and combine them into one image, and using the background-position property of css to select the part of the sprite you wish to use.<br />
This can for example, reduce the amount of HTTP Requests from 50 png files, to 1 png file. That's 49 less HTTP Requests!<br />
Often, it even pays off to replace those small gifs you have with png versions of them to include them in your final css-sprite.<br />
Nowadays, pretty much all high-traffic websites use CSS Sprites to reduce load times for the end-user.</p>
<p></p>
<p>Here is an example of a CSS Sprite: Apple's navigation menu.</p>
<p><a href="http://images.apple.com/global/nav/images/globalnavbg.png"><img src="http://img.devmoose.s3.amazonaws.com/articles/globalnavbg.png" border="0" alt="Apple in The Mystery Of CSS Sprites: Techniques, Tools And Tutorials" width="590" height="152" /></a></p>
<p></p>
<p><strong>More articles about CSS Sprites:</strong></p>
<ul>
<li><a href="http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/" target="_blank">The Mystery Of CSS Sprites: Techniques, Tools And Tutorials</a></li>
<li><a href="http://css-tricks.com/css-sprites/" target="_blank">CSS Sprites: What They Are, Why They’re Cool And How To Use Them</a></li>
<li><a href="http://www.websiteoptimization.com/speed/tweak/css-sprites/" target="_blank">CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance</a></li>
<li><a href="http://spritegen.website-performance.org/" target="_blank">CSS Sprite Generator</a></li>
</ul>
<h4>Combine Javascript and CSS files</h4>
<p>
Having several different css and javascript files also increases HTTP Requests, which slows down your website. So instead of having them all spread up, why not combine your css files into 1 css file?<br />
For example, at first I had several CSS files such as my <strong>CSS Reset</strong>, some wordpress plugin CSS files and my main CSS file.<br />
What I've done is combine all of these files into 1 big CSS file, which reduced the number of HTTP Requests, thus making the page load a little faster.</p>
<p>If your stylesheets are static files and you would like to keep them seperate for better maintenance, you can bundle them into one request dynamically:</p>
<pre class="brush: php">
# File css.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");
</pre>
<p>
Don't forget to set the header information in PHP like this:</p>
<pre class="brush: php">
# File css.php
header('Content-type: text/css');
# ...
</pre>
<p>
Save this code as a file called something like css.php and reference it from your HTML:</p>
<pre class="brush: css">
<link rel="stylesheet" type="text/css" href="/css.php" />
</pre>
<p></p>
<p>Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.
</p>
<p></p>
<p><strong>More articles about Combining Javascript and CSS files</strong></p>
<ul>
<li><a href="http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html" target="_blank">Make your pages load faster by combining and compressing javascript and css files</a></li>
<li><a href="http://davidwalsh.name/combine-css-media-styles-file" target="_blank">Combine Your CSS Media Styles Into One File</a></li>
<li><a href="http://www.websiteoptimization.com/speed/tweak/suture/" target="_blank">Suture CSS or JavaScript Files to Reduce HTTP Requests</a></li>
</ul>
<h3>2. Minify CSS and JavaScript</h3>
<p>Minifying is the removal of unnecessary characters from code to reduce its size, thereby improving load times.<br />
When you minify CSS or JavaScript, all comments and white space characters are removed(tab, new lines and spaces).</p>
<p>There are various tools for minifying CSS and JavaScript code. My favorite tools are <a href="http://tools.w3clubs.com/cssmin/" target="_blank">CSS Min</a> for minifying CSS and <a href="http://www.minifyjs.com/javascript-compressor/" target="_blank">Javascript Compressor</a> for minifying JavaScript.</p>
<h3>3. Place Stylesheets in the Header</h3>
<p>Web developers are concerned about performance of their website want browsers to load whatever content it has as soon as possible. This fact is especially important for pages with a lot of content and for users with slow Internet connections. When the browser loads the page progressively the header, the logo, the navigation components serve as visual feedback for the user.</p>
<p>When we place style sheets near the bottom part of the html, most browsers stop rendering to avoid redrawing elements of the page if their styles change.</p>
<h3>4. Put Scripts at the Bottom of the Document</h3>
<p>When loading a page, your browser completely stops when it encounters a <code>&lt;script&gt;</code> tag and executes the code within before continuing. You can't even load images from other hostnames until it's done.<br />
So if your JavaScript tags and files are in the <code>&lt;head&gt;</code> part of your document, your browser will load all the content of those <code>&lt;script&gt;</code> tags before displaying the <code>&lt;body&gt;</code> part of your page.</p>
<p>This is why it's important to put your JavaScript files at the bottom of the document, right before the <code>&lt;/body&gt;</code> tag. By doing this, your browser will load all of your important content(text, pics, etc) before loading the JavaScript.</p>
<p>In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.</p>
<p></p>
<p><strong>More articles about increasing JavaScript load speed</strong></p>
<ul>
<li><a href="http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html" target="_blank">Yahoo! on putting JavaScript at the Bottom</a></li>
<li><a href="http://www.reynoldsftw.com/2009/03/improving-javascript-load-performance/" target="_blank">Improving Javascript Load Performance</a></li>
<li><a href="http://www.rubyrobot.org/article/5-tips-for-faster-loading-web-sites" target="_blank">Stylesheets and Javascripts by RubyRobot</a></li>
</ul>
<h3> 5. Make Use of a Content Delivery Network</h3>
<p>Browsers are able to download two or four components on parallel per hostname.<br />
Hosting your static content(images, stylesheets and scripts) on different servers from your dynamic content will increase the load speed of your page by making use of parallel downloading.</p>
<p>According to the results of experiments conducted by Yahoo! Performance Team, using too many hostnames increases the amount of simultaneous HTTP requests but it will also increase the amount of DNS requests which affects the performance negatively. The Performance Team mentioned a strong balance between the number of parallel HTTP requests and required DNS requests to be performed of 2 to 4 hostnames. For higher number of hostnames, you may negatively affect the performance.</p>
<p></p>
<p><strong>More articles regarding Content Delivery Networks:</strong></p>
<ul>
<li><a href="http://developer.yahoo.net/blog/archives/2007/04/high_performanc_1.html" target="_blank">Use a CDN by Yahoo!</a></li>
<li><a href="http://msmvps.com/blogs/omar/archive/2007/10/01/make-your-website-faster-using-content-delivery-network.aspx" target="_blank">Make your website faster using Content Delivery Network </a></li>
</ul>
<h3>6. Gzip your CSS and JavaScript</h3>
<p>CSS and JavaScript files can get pretty damn big. Gzipping or compressing these files has shown to provide a reduction in the neighborhood of 70-80% of the original file size for large websites.<br />
<br />
To Gzip a CSS or JavaScript file, all you need is to put the following PHP snippet at the top of the document:</p>
<pre class="brush: php">
&lt;?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?&gt;
</pre>
<p><em>One thing to keep in mind though is to remember to use Content-type: text/javascript wen Gzipping Javascript files</em>.<br />
<br />
The code does 4 things:</p>
<ol>
<li>It uses PHP's ob_gzhandler to send compressed data. This function will first check to see if the browser requesting the file will accept 'gzip,deflate' encoding; if not it sends the file uncompressed.</li>
<li>It sends a header for the content type and character set for the file - in this case text/css and UTF-8.</li>
<li>The next step sends a 'cache-control http header'. Here 'must-revalidate' ensures that any information that you pass along about the freshness of your document is obeyed.</li>
<li>The final step is to send an 'Expires' header, to set an age on how long our cached file will last. Here we set it to expire in one hour.</li>
</ol>
<p>
In order for the Gzip to work, you'll have to rename the <strong>.css</strong> file to <strong>.php</strong> and reference it in your html.<br />
<br />
There are more methods for Gzipping CSS and JavaScript. You can read more about them in the following articles:</p>
<ul>
<li><a href="http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method" target="_blank">The Definitive Post on Gzipping your CSS</li>
<li><a href="http://developer.yahoo.net/blog/archives/2007/07/high_performanc_3.html" target="_blank">Gzip Components by Yahoo!</a></li>
</ul>
<h3>7. Make JavaScript and CSS External</h3>
<p>Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. Inline JavaScript and CSS increases the HTML document size but reduces the number of HTTP requests. With cached external files, the size of the HTML is kept small without increasing the number of HTTP requests.
</p>
<h3>8. Optimize Your Images</h3>
<p><strong>Optimizing images is a must</strong> since they're usually the biggest files on the page and optimizing them can greatly reduce their size and reduce load times.<br />
So, before you upload your images to your ftp, see if you can optimize them to decrease the loading time of your website by using tools like <a href="http://www.gracepointafterfive.com/punypng" target="_blank"> PunyPNG</a>, Yahoo!'s <a href="http://www.smushit.com/ysmush.it/" target="_blank">Smush.it</a> or any other image optimization tools out there.</p>
<p></p>
<p><strong>More articles about Image Optimization:</strong></p>
<ul>
<li><a href="http://perishablepress.com/press/2009/05/17/png-image-optimization/" target="_blank">5-Minute PNG Image Optimization</a></li>
<li><a href="http://yensdesign.com/2009/02/speeding-up-your-website-optimizing-jpeg-images/" target="_blank">Speeding Up Your Website: Optimizing JPEGs images</a></li>
</ul>
<h3>9. Preload Components</h3>
<p>
Preloading content is a great way to improve user experience. When components are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for AJAX and image-heavy sites such as photo galleries where you want to deliver the goods as quickly and seamlessly as possible.</p>
<p></p>
<p><strong>More articles about preloading:</strong></p>
<ul>
<li><a href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/" target="_blank">3 Ways to Preload Images with CSS, JavaScript, or Ajax</a></li>
<li><a href="http://trevordavis.net/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/" target="_blank">How to Preload Images When You Can’t Use CSS Sprites</a></li>
</ul>
<h3>10. Use Tools to Analyze Performance</h3>
<ul>
<li><a href="http://developer.yahoo.com/yslow/" target="_blank">Yahoo!'s Y-Slow</a></li>
<li><a href="http://code.google.com/speed/page-speed/" target="_blank">Google's Page Speed</a></li>
<li><a href="http://www.webpagetest.org/" target="_blank">AOL’s WebPageTest</a></li>
</ul>
<p>There are literally a million things you can do to make a page load faster, but in this article I only showed 10 which I think have the biggest impact on the load times of a page. In the future I'll make articles about front and back end tweaks you can do to boost the load times even more.</p>
<h4>More articles about speeding up websites</h4>
<ul>
<li><a href="http://developer.yahoo.com/performance/rules.html" target="_blank">Best Practices for Speeding Up Your Web Site</a></li>
<li><a href="http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/" target="_blank">Website Performance: What To Know and What You Can Do</a></li>
<li><a href="http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance/" target="_blank">10 Ways to Improve Your Web Page Performance</a></li>
<li><a href="http://www.queness.com/post/588/15-ways-to-optimize-css-and-reduce-css-file-size" target="_blank">15 Ways to Optimize CSS and Reduce CSS File Size</a></li>
</ul>
<p><span class="related"></p>
<h4>Related Articles</h4>
<p><ul>
	<li><a title="20+ .htaccess Hacks Every Web Developer Should Know About" href="http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about">20+ .htaccess Hacks Every Web Developer Should Know About</a></li>

	<li><a title="10 Basic SEO Tips Every Web Developer Should Follow" href="http://devmoose.com/blogging/10-basic-seo-tips-every-web-developer-should-follow">10 Basic SEO Tips Every Web Developer Should Follow</a></li>

	<li><a title="6 CSS Tutorials That Take You From Beginner to Expert" href="http://devmoose.com/coding/6-css-tutorials-that-take-you-from-beginner-to-expert">6 CSS Tutorials That Take You From Beginner to Expert</a></li>
</ul>
<br />
</span></p>
<p><hr><p><small>&copy; 2010 <a href="http://devmoose.com/">DevMoose</a> | <a href="http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website">Permalink</a>
</p>
]]></content:encoded>
			<wfw:commentRss>http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>
