Tuesday, October 6, 2009

30 Handy Cheat Sheets and Reference Guides for Web Professionals

Posted on 8:55 AM by -

Cheat sheets and reference guides are useful for both beginners and advanced web professionals.

They can be used to help you remember syntax or as a tool to aid in memorization.

In this post, we aim to cover the reference guides for all of the most commonly used platforms, software and coding languages.

Below you’ll find a compilation of the 30 most useful and well-organized cheat sheets, checklists and reference guides.

If you know of a useful cheat sheet that we haven’t covered here, please share the link in the comments’ section at the end of the article.

1. 25-Point Website Usability Checklist

Usability is a central concern for any web developer. The 25-Point Website Usability Checklist is a simple step-by-step list that can help your website achieve maximum usability.
Four major components are covered in this checklist: accessibility, identity, navigation and content. The list is a printable PDF and contains a rating system and space for comments.
Download the 25-Point Website Usability Checklist
Usability Checklist

2. Browser Compatibility Table

This is a great reference guide to ensure browser compatibility.
Below is an extract from a table that contains a list of various CSS rules and their compatibility with common browsers and operating systems. With a quick glance, the designer or developer can note which CSS properties should be used or avoided.
The table also offers an interactive feature that highlights the row your cursor is on. This makes pinpointing the compatibility of a specific CSS property much easier.
Go to the Browser Compatibility Table
Browser Compatibility Table

3. Web Standards Checklist

A website that is compliant with W3C’s standards will be more usable and search-engine friendly than one that is not.
There are a number of ways to ensure that a website is standards-compliant; one way is to use a checklist.
This checklist contains a chronological list of factors to consider while building a website.
Download The Web Standards Checklist



4. Search Engine Optimization Cheat Sheet

Search Engine Optimization (SEO) is very important if a website is to be successful. This cheat sheet may seem to be for beginners, but it holds valuable information for reference and education. The ten categories are SEO rules at the coding level.
The ten essential categories for good optimization are: important HTML tags, search engine indexing limits, title tag syntax, common canonical issues, 301 redirects on Apache, search engine robot user agents, common robot traps to avoid, robot meta tags syntax, robots.txt syntax and site map syntax.
Included in each category is further explanation and an example.
The cheat sheet can be downloaded as a two-page printer-friendly PDF.
Download the Web Developer’s SEO Cheat Sheet
SEO Cheat Sheet

5. Tweet Sheet 2

Because Twitter is fast becoming a mainstream news feed, using it to your website’s advantage is important.
Tweet Sheet is a fairly simple cheat sheet about Twitter use and syntax, created by Jason Theodor. Tweet Sheet includes Twitter’s mobile URL and text numbers, personal commands, mobile commands, user name commands, tracking commands and information on Twitter applications and tools.
Version 2 is offered in PDF form, a change from the simple image in Version 1. The second version is a grid of smaller cheat sheets, with a cut-out line so that it can easily be shared with friends or posted in other locations.
Download Tweet Sheet 2
Tweet Sheet

6. XHTML Cheat Sheet v1.03

This XHTML cheat sheet is excellent for XHTML coders. Along with many basic attributes, this two-page grid includes references that even experienced web professionals would find useful.
Three types of elements are defined in this cheat sheet: block, inline and table elements. The miscellaneous section includes 22 additional elements. Each row contains the name, description and attributes of each of the elements available for use.
More references are on the side, including %attrs, %focus, input types, link types, deprecated elements, HTML ASCII entities and more. Being so detailed, this is a great tool for anyone who uses XHTML frequently.
Download the XHTML Cheat Sheet v1.03
XHTML Cheat Sheet

7. CSS Cheat Sheet

The CSS Cheat Sheet is a two-page PDF and is the most detailed CSS reference guide available. It contains a lot of information and is great as a printed reference.
Sections you may find useful are the ones on the CSS box model, selectors, pseudo-elements and pseudo-classes, colors, text properties and layout properties.
Download the CSS Cheat Sheet
XHTML Cheat Sheet

8. Blueprint Framework and Blueprint CSS Cheat Sheet

The Blueprint CSS framework is a great shortcut for designers. The developers of this tool explain:
“Blueprint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plug-ins and even a style sheet for printing.”
To download the blueprint framework, go to BlueprintCSS.org
Paired with the framework is the Blueprint CSS cheat sheet to help shorten development time. The cheat sheet is well laid out, nicely color-coded and detailed. It works in sync with the framework and was made with designers in mind, featuring a visual representation of a 950 pixel-wide grid system, a detailed list of Blueprint features and call and syntax examples.
Download the Blueprint CSS Cheat Sheet.
Blueprint CSS Cheat Sheet

9. Mixing Typefaces

This PDF is an excellent reference for designers who don’t want to spend a lot of time figuring out whether two or more fonts will work well together. This tool enables designers to choose the perfect typography combination.
Although the cheat sheet was created in 1992, most of the widely used web fonts are present. As the image above shows, a list of fonts is repeated along the top and left side.
A number from 1 to 3 appears where each pair intersects. 1 means that the two fonts are compatible, 2 means that with proper implementation the two fonts could work well together, and 3 means that they will clash.
Download the Mixing Typefaces PDF
Matching Typefaces Cheat Sheet

10. Common Fonts for all Versions of Windows, and Mac Equivalents

While this guide isn’t exhaustive, it’s a perfect quick reference tool for choosing the typography for a new website. All 18 font groups listed are web safe and cross-browser compatible.
All of the fonts are grouped together with syntax: Windows version, Mac version, font family. The bottom of the page has very specific information on using fonts on different operating systems and browsers and even has a screenshot of each scenario.
Although this web page is already well known in the web designer community, we felt it was important to include on this list.
Download Common Fonts for all Versions of Windows, and Mac Equivalents
Common Fonts

11. Official Adobe Photoshop CS4 Reference

The official Adobe Reference guide is available online and in PDF form. While not exactly a “quick” reference guide, it is essential for anyone who uses Photoshop professionally.
Download Adobe Photoshop CS4 Help Guide Online
Download the Adobe Photoshop CS4 Help Guide PDF
Adobe Photoshop CS4 Official Help Guide

12. Adobe Photoshop CS4 Keyboard Shortcuts

This is the keyboard shortcuts cheat sheet for the newest version of Photoshop. This four-page guide can help designers cut their production time by as much as half.
For easy navigation, the PDF is arranged according to the main menu in Photoshop, and then under each menu item it lists the shortcuts in alphabetical order. Because PC and Mac have different shortcuts, there are two different reference guides.
Download the PC version | Download the Mac version
Photoshop CS4 Keyboard Shortcuts

13. Adobe Flash CS4 Keyboard Shortcuts

This is a keyboard shortcuts guide for Adobe Flash CS4. This PDF is also arranged to reflect the Flash CS4 menu, but the list of shortcuts, rather than being in alphabetical order, is arranged according to the application’s menu listing, too. This cheat sheet even has a friendly graphic at the top with the menu order presented in Flash.
As with most Adobe keyboard shortcut cheat sheets, both PC and Mac versions are available.
Download the PC version | Download the Mac version
Flash CS4 Keyboard shortcuts


14. ActionScript 2.0 to 3.0 Migration Cheat Sheet

This cheat sheet covers both ActionScript 2.0 and ActionScript 3.0 and is organized to help those who need to switch to 3.0. Below is a short extract from the six-page PDF.
The functions and classes of ActionScript 2.0 are to the left of each section, followed by their equivalents in ActionScript 3.0. This cheat sheet is great for anyone transitioning to 3.0 or learning ActionScript.
Download the ActionScript 2.0 to 3.0 Migration Cheat Sheet
ActionScript 2.0 to 3.0 Migration cheat sheets

15. Adobe Dreamweaver CS4 Keyboard Shortcuts

This is another guide in the family of cheat sheets for Adobe, this one for Dreamweaver CS4 keyboard shortcuts. It was made by the creator of the Flash CS4 sheet and so has many of the same features.
The cheat sheet also follows the exact menu structure of Dreamweaver CS4 and has the same graphic at the top showing the menu order.
Unfortunately, a Mac version of this cheat sheet is still in the works; only the PC version is available at this time.
Either way, it is a great cheat sheet and could be easily adapted into a Mac version. For most shortcuts, you would just have to replace Control with the Command key. Keep checking the cheat sheet’s page for the release of the Mac version.
Download the Dreamweaver CS4 Keyboard Shortcuts PDF
Dreamweaver CS4 Keyboard Shortcuts

16. WordPress Help Sheet

The WordPress Help Sheet is the most useful cheat sheet if you are a WordPress theme developer. It is a quick reference guide for the most commonly used WordPress snippets.
Only four categories are covered in this guide, but the simplicity of this sheet makes it so appealing.
Only the most needed and commonly used snippets are included, making them all easy to find. The four sections include: file names of a basic WordPress theme, header snippets, all other template snippets and commonly used extras.
Download the WordPress Help Sheet
Basic Wordpress Cheat Sheet

17. Advanced WordPress Help Sheet

For those who create WordPress themes regularly, WPCandy has created an advanced help sheet. It contains commonly used snippets for themes that require added functionality.
The three-page PDF covers a wide range of snippets, such as for content going only on the front page, styling for certain categories, unique images for each category, dynamic page titles, query posts and more.
Any designer who creates professional WordPress themes should have this help sheet at hand. Most of the snippets are required in professional themes.
Download the Advanced WordPress Help Sheet
Advanced WordPress Cheat Sheet

18. WordPress Theme Development Checklist

The WordPress Theme Development Checklist is an extensive checklist in nine parts. The checklist covers general topics (like theme information and screenshots), blog components (like RSS feeds), timestamps, as well as category and page navigation. Below is an example of the first half.
This checklist can be used while creating a WordPress theme or to help finalize one. As extensive as it is, it’s only one page and can be easily printed when it comes time to develop a new theme.
Download the WordPress Theme Development Checklist
WordPress Theme Development Checklist

19. JavaScript Cheat Sheet

Several of the cheat sheets featured here are from AddedBytes.com, because of the detailed and exceptionally high quality of the resources there. The first one on the AddedBytes list is the JavaScript cheat sheet.
This cheat sheet is logically organized into DOM methods, functions, regular expressions, etc. It’s easy to use and a great reference for all common JavaScript uses.
The guide is not only excellent for JavaScript beginners (covering items as basic as the syntax for putting JavaScript into HTML) but is also suited to programmers at an advanced level (referring to more advanced JavaScript functionality).
Download the JavaScript Cheat Sheet
JavaScript Cheat Sheet

20. Regular Expressions Cheat Sheet (v2)

Although some references to Regular Expressions are in the above JavaScript cheat sheet, this one is more detailed. Now in version 2, this cheat sheet has additional material, including information for those who may not be familiar with Regular Expressions.
Although we’ve positioned this entry just below the JavaScript cheat sheet, this PDF is not a guide to any specific language, and so would be great for developers who do not code in any specific language (or who code in more than one language).
Download the Regular Expressions Cheat Sheet
Regular Expressions Cheat Sheet

21. jQuery Visual Map

Although the jQuery Visual Map is not a printable reference like most of the other cheat sheets on this list, it is still a great tool for referencing, learning jQuery and grabbing snippets.
The tool’s interactive nature makes finding exactly what you need easy, and code is included in all of the examples for easy copying and pasting. This guide is ultimately an interactive jQuery manual.
Download jQuery Visual Map
jQuery Visual Map

22. MooTools Cheat Sheet

Those who prefer the MooTools JavaScript framework to jQuery may find this cheat sheet useful. This colorful and detailed reference guide includes every commonly used feature of MooTools 1.2.
The references are compact, yet the “pseudo-code” serves perfectly as illustration. Within the one-page PDF are 22 sections of reference material.
In addition to the older version, the updated cheat sheet now contains documentation for Core, Native, Class, Element, Utilities and Request.
Download the MooTools 1.2 Cheat Sheet
Mootools Cheat Sheet

23. Prototype 1.6.0.2 Cheat Sheet

This one-page informative PDF is a great resource for those using Prototype.js and includes a visual reference for offsets and dimensions.
The modules are in a logical order, with the most commonly used ones in the top left and less common ones in the bottom right. The page is printable and easy to use as a desk-side reference guide.
Download the Prototype 1.6.0.2 Cheat Sheet
Prototype Cheat Sheet

24. Python

This one-page cheat sheet is a wonderful reference tool if you code mainly in Python.
The 11 sections that make up the cheat sheet are system variables, string methods, datetime methods, time methods, date formatting, sys.argv, OS variables, list methods, file methods, class special methods, indexes and slices.
This is a convenient all-in-one general reference for anyone who codes in Python or is trying to learn Python. There are also some side notes and general pseudo-code.
Download the Python Cheat Sheet
Python Cheat Sheet

25. mod_rewrite Cheat Sheet (v2)

URL rewriting can improve your website’s usability, search functionality and navigation cleanliness.
The mod_rewrite cheat sheet has everything from basic regular expression syntax to listing flags for the RewriteRule and RewriteCond directives. It also provides examples and general syntax so that you don’t have to be a mod_rewrite expert to use the PDF.
Download the mod_rewrite cheat sheet
mod_rewrite Cheat Sheet



26. PHP Cheat Sheet (V2)

This one-page cheat sheet is a full reference for the PHP programming language. It is better suited to those who already know how to code in PHP and serves as a reminder of certain syntax and names of functions and variables.
Now in its second edition, this cheat sheet is better organized and has new components, giving it a total of nine sections: array functions, regular expression functions, date formatting, regular expression syntax, string functions, file system functions, PCRE modifiers, date and time functions and fopen() modes.
Download the PHP Cheat Sheet
PHP Cheat Sheet

27. SQL Server Cheat Sheet

This handy, one-page cheat sheet provides quick reference for the SQL server.
Included in the 14 sections are: functions, syntax for creating a function, date parts, syntax for creating a trigger and syntax for creating a stored procedure.
It is available for download as a PDF or PNG file.
Download the SQL Server Cheat Sheet
SQL Server Cheat Sheet

28. MySQL Cheat Sheet

This cheat sheet is a great reference for anyone who frequently uses MySQL or PHP with MySQL. It contains the most commonly used MySQL functions in PHP, data types and ranges and sample select queries.
Along the side of the main cheat sheet are various keywords and functions used in MySQL: mathematical keywords, date and time keywords, group words, control flow, string, comparison, cast and more.
No need to memorize the exact names of MySQL functions or full range of each data type; just download the PDF or PNG version of the MySQL cheat sheet to have on hand.
Download the MySQL cheat sheet
MySQL Cheat Sheet

29. Ruby on Rails Cheat Sheet

This Ruby on Rails one-page printable reference is a useful go-to guide for anyone who uses Ruby on Rails extensively.
Included in the cheat sheet are five main sections and a few side sections containing methods. The main section features a directory structure, predefined variables in Ruby, reserved keywords, regular expression syntax and a side note reminder of methods.
In addition to the center blocks is a list of methods along the side, arranged in the following categories: strings, regex, time, arrays, validation and enumerable mixin.
Download the Ruby on Rails cheat sheet
Ruby on Rails Cheat Sheet

30. ASP/VBScript Cheat Sheet

The last resource on our list is the ASP/VBScript cheat sheet, for anyone who is an ASP developer.
Similar in layout to many of the other cheat sheets on AddedBytes, this one is well organized and contains crucial, often-forgotten information for the ASP developer.
The cheat sheet includes regular expressions, date function arguments, redirect with 301 header, file inclusion, function argument orders, file modes, common LCID modes, constants, methods, properties, functions and collections.
Download the ASP/VBScript cheat sheet
ASP.NET/VBScript Cheat Sheet

Compiled exclusively for WDD by Kayla Knight.
Which cheat sheets do you use the most? Please share other favorite cheat sheets that we may have missed in the comments’ area below…

No Response to "30 Handy Cheat Sheets and Reference Guides for Web Professionals"

Leave A Reply