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

http://www.addedbytes.com/cheat-sheets/php-cheat-sheet/

2. MySQL

MySQL Cheat Sheet

http://www.addedbytes.com/cheat-sheets/mysql-cheat-sheet/

3. JavaScript

JavaScript Cheat Sheet

http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/

4. CSS

CSS Cheat Sheet

http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

5. Regular Expressions

Regular Expressions Cheat Sheet

http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/

6. Apache’s mod_rewrite

mod_rewrite Cheat Sheet

http://www.addedbytes.com/apache/mod_rewrite-cheat-sheet/

7. jQuery

jQuery Cheat Sheet

http://acodingfool.typepad.com/blog/pdf/jquery_1.3_cheatsheet_v1.pdf

8. HTML

HTML Cheat Sheet

http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

9. HTML Character Entities

HTML Entities Cheat Sheet

http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/

10. RGB Hex Color Codes

RGB Color Codes Cheat Sheet

http://www.addedbytes.com/cheat-sheets/colour-chart/

11. .htaccess

.htaccess Cheat Sheet

http://www.thejackol.com/htaccess-cheatsheet/

12. Apache

Apache Cheat Sheet

http://www.petefreitag.com/cheatsheets/apache/

13. SEO

SEO Cheat Sheet

http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet

14. Gmail

Gmail Cheat Sheet

http://www.marcofolio.net/cheat_sheets/gmail_keyboard_shortcuts_cheat_sheet.html

15. HTML5

HTML5 Cheat Sheet

http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

16. Google Analytics

Google Analytics Cheat Sheet

http://www.searchenginejournal.com/the-huge-collection-of-google-analytics-tips/7426/

17. WordPress Cheat Sheets

WordPress Cheat Sheets

http://speckyboy.com/2009/06/17/14-essential-wordpress-development-and-design-cheat-sheets/

18. Subversion

Subversion Cheat Sheet

http://www.addedbytes.com/cheat-sheets/subversion-cheat-sheet/

19. Eclipse

Eclipse Cheat Sheet

http://refcardz.dzone.com/refcardz/getting-started-eclipse?oid=hom7187

20. Google Search Engine

Google Cheat Sheet

http://www.google.com/help/cheatsheet.html

21. Twitter

Twitter Cheat Sheet

http://jasontheodor.com/2009/04/28/twitter-tweet-sheet-2/

22. CakePHP

CakePHP Cheat Sheet

http://cakephp.org/files/Resources/CakePHP-1.2-Cheatsheet.pdf

23. Joomla

Joomla 1.5 Cheat Sheet

http://www.younic.de/joomla-basic-template-cheatsheet

24. CodeIgniter

CodeIgniter Cheat Sheet

http://designfellow.com/blog/freebies/codeigniter-quick-reference-cheat-sheet-version-2-0-released/

25. Drupal

Drupal Cheat Sheet

http://www.inmensia.com/files/pictures/internal/CheatSheetDrupal4.7.png

26. Firebug

Firebug Cheat Sheet

http://duvet-dayz.com/firebug-cheatsheet/

Create a Simple Infinite Carousel with jQuery

Introduction

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 🙂

1. HTML

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></div>
	</div>

	<div></div>

	<div id="slides">
		<ul>
			<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>
		</ul>
		<div></div>
	</div>

</div>

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 {
	width:255px;
	height:290px;
	margin:0 auto;
}

#slides {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:250px;
	height:250px;
	border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */
#slides ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;
	width:750px;
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
	width:250px;
	height:250px;
	float:left;
}

#slides li img {
	padding:5px;
}

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

#buttons a {
	display:block;
	width:31px;
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;
}

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
	$('#slides').hover(

		function() {
			clearInterval(run);
		},
		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() {
	$('#next').click();
}

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

JQuery is the BEST

 

 

Dojo   

—-

 

– 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

 

 

 

Mochikit

– 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

 

 

 

 

 

MooTools

 

– 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

 

Prototype

 

– 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

 

 

JQuery

 

– 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

http://programming.reddit.com/info/61xbz/comments

 

 

 

http://mootools.net/slickspeed/

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

 

http://www.malsup.com/jquery/form/comp/

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

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

 

 

jQuery.noConflict

Using jQuery with Other Libraries
From jQuery JavaScript Library
Jump to: navigation, search
[edit]
General

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”
[edit]
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
example:

<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
jQuery.noConflict();

// Use jQuery via jQuery(…)
jQuery(document).ready(function(){
jQuery(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>

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:

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

// Use jQuery via $j(…)
$j(document).ready(function(){
$j(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>

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
libraries.

<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
jQuery.noConflict();

// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>

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
[edit]
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
libraries)
* 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