25+ Must-Have Cheat Sheets for Web Developers

Who wants to go to Google or break out the library of programming books every single time you get stuck on something? Below is a compilation of extremely useful cheat sheets, which can be printed, laminated and placed nearby for easy reference while doing your web development and design. Everyone has moments where a function cannot be remembered, and that is where these cheat sheets can be lifesavers. Bookmark this page for an easy portal to all of the cheat sheets, or an individual page if you find it helpful. Please don’t hesitate to post any cheat sheets we neglected to include, for this is about sharing knowledge.

1. PHP

PHP Cheat Sheet


2. MySQL

MySQL Cheat Sheet


3. JavaScript

JavaScript Cheat Sheet


4. CSS

CSS Cheat Sheet


5. Regular Expressions

Regular Expressions Cheat Sheet


6. Apache’s mod_rewrite

mod_rewrite Cheat Sheet


7. jQuery

jQuery Cheat Sheet



HTML Cheat Sheet


9. HTML Character Entities

HTML Entities Cheat Sheet


10. RGB Hex Color Codes

RGB Color Codes Cheat Sheet


11. .htaccess

.htaccess Cheat Sheet


12. Apache

Apache Cheat Sheet


13. SEO

SEO Cheat Sheet


14. Gmail

Gmail Cheat Sheet


15. HTML5

HTML5 Cheat Sheet


16. Google Analytics

Google Analytics Cheat Sheet


17. WordPress Cheat Sheets

WordPress Cheat Sheets


18. Subversion

Subversion Cheat Sheet


19. Eclipse

Eclipse Cheat Sheet


20. Google Search Engine

Google Cheat Sheet


21. Twitter

Twitter Cheat Sheet


22. CakePHP

CakePHP Cheat Sheet


23. Joomla

Joomla 1.5 Cheat Sheet


24. CodeIgniter

CodeIgniter Cheat Sheet


25. Drupal

Drupal Cheat Sheet


26. Firebug

Firebug Cheat Sheet


Create a Simple Infinite Carousel with jQuery


Finally, I have times for this carousel script. I always think that it’s hard to figure it out, but thanks to a tutorial – Making a jQuery Infinite Carousel with nice features from tutsvalley. I learnt something new from there. So, yes, I modify the code and make it into something I want, and hopefully this is what you want as well 🙂


Alright, We have a main wrapper called carousel and inside it, we have two sections – buttons and slides. I have styled the previous and next links to two arrows with mouseover effect. The rest is pretty basic.

<div id="carousel">
	<div id="buttons">
		<a href="#" id="prev">prev</a>
		<a href="#" id="next">next</a>


	<div id="slides">
			<li><img src="slide1.gif" width="240" height="240" alt="Slide 1"/></li>
			<li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li>
			<li><img src="slide3.gif" width="240" height="240" alt="Slide 3"/></li>


2. CSS

CSS is a little bit complicated. First of all you have to set correct width in #carousal, #slides, #slides ul and also #slides li. So, I break it down and put extra comments, and if you want to change it, I’d recommend you change it from the LI item first, and the following is the sequence:

  • #slides li :
  • #slides ul : the width is the total width of #ul li items
  • #slides : the width and height should be the same with #ul li items
  • #carousel : the width should be slightly bigger than #ul li items, except the height, because it inclde the height of buttons as well.
#carousel {
	margin:0 auto;

#slides {
	/* fix ie overflow issue */
	border:1px solid #ccc;

/* remove the list styles, width : item width * total items */
#slides ul {

/* width of the item, in this case I put 250x250x gif */
#slides li {

#slides li img {

/* Styling for prev and next buttons */
#buttons {
	padding:0 0 5px 0;

#buttons a {

a#prev {
	background:url(arrow.gif) 0 -31px no-repeat;

a#prev:hover {
	background:url(arrow.gif) 0 0 no-repeat;

a#next {
	background:url(arrow.gif) -32px -31px no-repeat;

a#next:hover {
	background:url(arrow.gif) -32px 0 no-repeat;

.clear {clear:both}

3. Javascript

There are two new methods we are about to learn. Well, it’s something new to me too! After and Before method.

  • After – Insert content after each of the matched elements.
  • Before – Insert content before each of the matched elements.

So, to create an infinite carousel, we need to depend on these two method because we need:

  • If the user clicked on previous button, we need to move the last item to the front of the first item
  • If the user clicked on next button, we need to move the first item to the back of the last item.

As a result, whenever we clicked on next or previous button, the script will keep moving the item and that make it an infinite carousel. Again, credit to my friend at tutsvalley for this idea, check it out his version of carousel – Making a jQuery Infinite Carousel with nice features

And also, our very cheapskate but absolutely effective method of rotating the slide – using click() function to click next link and set a timer for it 🙂

$(document).ready(function() {

	//rotation speed and timer
	var speed = 5000;
	var run = setInterval('rotate()', speed);	

	//grab the width and calculate left value
	var item_width = $('#slides li').outerWidth();
	var left_value = item_width * (-1); 

    //move the last item before first item, just in case user click prev button
	$('#slides li:first').before($('#slides li:last'));

	//set the default item to the correct position
	$('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
	$('#prev').click(function() {

		//get the right position
		var left_indent = parseInt($('#slides ul').css('left')) + item_width;

		//slide the item
		$('#slides ul').animate({'left' : left_indent}, 200,function(){    

            //move the last item and put it as first item
			$('#slides li:first').before($('#slides li:last'));           

			//set the default item to correct position
			$('#slides ul').css({'left' : left_value});


		//cancel the link behavior
		return false;


    //if user clicked on next button
	$('#next').click(function() {

		//get the right position
		var left_indent = parseInt($('#slides ul').css('left')) - item_width;

		//slide the item
		$('#slides ul').animate({'left' : left_indent}, 200, function () {

            //move the first item and put it as last item
			$('#slides li:last').after($('#slides li:first'));                 	

			//set the default item to correct position
			$('#slides ul').css({'left' : left_value});


		//cancel the link behavior
		return false;


	//if mouse hover, pause the auto rotation, otherwise rotate it

		function() {
		function() {
			run = setInterval('rotate()', speed);


//a simple function to click next link
//a timer will call this function, and the rotation will begin 🙂
function rotate() {

COmpare DOJO, MOCHI KIT, MOO Tools,Yahoo! UI,Prototype and JQuery

JQuery is the BEST






– Built in functionality / Power / ease of use — many compatibility issues, ease of use — not good

– add ons / widgets       — simple — no widgets

– Size of footprint          —23KB

– Documentation / Community — community supported by many companies like IBM, AOL, Sun

Documentation– not good





– Built in functionality / Power / ease of use — compatibility good, ease of use    — good

– add ons / widgets       — not so many , no widgets

– Size of footprint          —111KB

– Documentation / Community   — Documentation good, still a little community








– Built in functionality / Power / ease of use — good

– add ons / widgets       — good

– Size of footprint          —43KB

– Documentation / Community — had some good community

Documentation — good



Yahoo! UI


– Built in functionality / Power / ease of use — ease of use — some restrictions to use its functions and more time need to learn the functions

– add ons / widgets       — ok

– Documentation / Community   —

Community       good

Documentation–Very good docs


Some bugs have to be fixed some compatibility issues




– Built in functionality / Power / ease of use

– add ons / widgets       — ok

– Size of footprint          —122KB

– Documentation / Community  

Had some community

Documentation–Very good docs

ease of use — some restrictions to use its functions and more time need to learn the functions

Compatibility fine

Design is not good


Prototype does not provide any widgets or controls





– Built in functionality / Power / ease of use

– add ons / widgets       — good widgets from jquery UI

– Size of footprint          —26.5 KB

– Documentation / Community  

had lot of communities behind

Documentation–Very good docs

Ease of use — very good, performance is better that all the other tools

Ease to read and simplified code

Compatibility good except Konqueror







jQuery was the first toolkit to support chaining and that it executes it nicely.


Commnets over comparition






Selectors                                              Prototype 1.6  MooTools 1.2 beta1     JQuery 1.21

IE 6.0 final time (less is better)              2098                1477                1239 

mozilla 1.5 final time (less is better)                    299                  346                  935


From the above results we can see that for IE jquery is better

For prototype some tags are not working



This url checks  JQuery,Dojo,Yahoo! UI,Prototype,Mochikit

From the above url we can see that Jquery supports  all the features




Using jQuery with Other Libraries
From jQuery JavaScript Library
Jump to: navigation, search

The jQuery library, and virtually all of its plugins are constrained
within the jQuery namespace. As a general rule, “global” objects are
stored inside the jQuery namespace as well, so you shouldn’t get a clash
between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses “$” as a shortcut
for “jQuery”
Overriding the $-function

However, you can override that default by calling jQuery.noConflict() at
any point after jQuery and the other library have both loaded. For

<script src=”prototype.js”></script>
<script src=”jquery.js”></script>

// Use jQuery via jQuery(…)

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;

This will revert $ back to its original library. You’ll still be able to
use “jQuery” in the rest of your application.

Additionally, there’s another option. If you want to make sure that jQuery
won’t conflict with another library – but you want the benefit of a short
name, you could do something like this:

<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
var $j = jQuery.noConflict();

// Use jQuery via $j(…)

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;

You can define your own alternate names (e.g. jq, $J, awesomeQuery –
anything you want).

Finally, if you don’t want to define another alternative to the jQuery
name (you really like to use $ and don’t care about using another
library’s $ method), then there’s still another solution for you. This is
most frequently used in the case where you still want the benefits of
really short jQuery code, but don’t want to cause conflicts with other

<script src=”prototype.js”></script>
<script src=”jquery.js”></script>

// Put all your code in your document ready area
// Do jQuery stuff using $

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;

This is probably the ideal solution for most of your code, considering
that there’ll be less code that you’ll have to change, in order to achieve
complete compatibility.

Also see: Custom Alias
Referencing Magic – Shortcuts for jQuery

If you don’t like typing the full “jQuery” all the time, there are some
alternative shortcuts:

* Reassign jQuery to another shortcut
o var $j = jQuery;
o (This might be the best approach if you wish to use different
* Use the following technique, which allows you to use $ inside of a
block of code without permanently overwriting $:
o (function($) { /* some code that uses $ */ })(jQuery)
o Note: If you use this technique, you will not be able to use
Prototype methods inside this capsuled function that expect $ to
be Prototype’s $, so you’re making a choice to use only jQuery
in that block.
* Use the argument to the DOM ready event:
o jQuery(function($) { /* some code that uses $ */ });
o Note: Again, inside that block you can’t use Prototype methods