Tuesday, July 22, 2008

Cheat Sheets for Front-end Web Developers

Quickly remember codes, syntax and related concepts visually
Here are some links for your reference.


The Web Developer’s SEO Cheat Sheet
http://www.seomoz.org/user_files/SEO_Web_Developer_Cheat_Sheet.pdf

The WordPress Help Sheet

http://wpcandy.com/wp-content/uploads/WordPress-Help-Sheet.pdf

HTML Help Sheet
http://www.gosquared.com/images/help_sheets/HTML%20Help%20Sheet.pdf

HTML Cheat Sheet
http://www.addedbytes.com/download/html-cheat-sheet-v1/pdf/
http://www.addedbytes.com/download/html-cheat-sheet-v1/png/

HTML Character Entities Cheat Sheet
http://www.addedbytes.com/download/html-character-entities-cheat-sheet/pdf/
http://www.addedbytes.com/download/html-character-entities-cheat-sheet/png/


XHTML Cheat Sheet v. 1.03
http://floele.flyspray.org/htmlcheatsheet.pdf

CSS Cheat Sheet (V2)
http://www.addedbytes.com/download/css-cheat-sheet-v2/pdf/
http://www.addedbytes.com/download/css-cheat-sheet-v2/png/

CSS Cheat Sheet

http://lesliefranke.com/sandbox/ref/csscheatsheet.pdf
http://lesliefranke.com/sandbox/ref/csscheatsheet.html

CSS Shorthand Cheat Sheet
http://www.leigeber.com/wp-content/uploads/2008/04/css-cheat-sheet.pdf

CSS Level 1 Quick Reference

http://refcards.com/docs/deepx/css1/CSS1.pdf

CSS Level 2 Quick Reference
http://refcards.com/docs/jungb/css2/css2.pdf

CSS2.1 Quick Reference Card
http://www.explainth.at/downloads/cssquick.pdf

CSS2 Reference Guide
http://www.veign.com/downloads/guides/qrg0007.pdf

JavaScript Cheat Sheet
http://www.addedbytes.com/download/javascript-cheat-sheet-v1/pdf/
http://www.addedbytes.com/download/javascript-cheat-sheet-v1/png/


Addison-Wesley’s JavaScript Reference Card
http://wps.aw.com/wps/media/objects/2234/2287950/javascript_refererence.pdf

JavaScript and Browser Objects Quick Reference
http://www.dannyg.com/dl/JSB6RefBooklet.pdf

The most common DOM methods at a glance
http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf

JavaScript Quick Reference Card/Cheatsheet
http://www.explainth.at/downloads/jsquick.pdf

mootools 1.2 cheat sheet
http://mediavrog.net/blog/wp-content/uploads/2008/06/mootools-12-cheat-sheet.pdf

jQuery Cheatsheet
http://colorcharge.com/wp-content/uploads/2007/12/jquery12_colorcharge.png

jQuery 1.2 Cheat Sheet
http://www.gscottolson.com/jquery/jQuery1.2.cheatsheet.v1.0.pdf

jQuery Visual Map
http://jquery.com/images/jQuery-Map.png

RGB Hex Colour Chart
http://www.addedbytes.com/download/rgb-hex-cheat-sheet-v1/pdf/

E-Learning CD Store
http://www.indusnetacademy.com/store/

If any one who is reading this and knows another sources please comment it here.
Enjoy :)

Tuesday, July 15, 2008

Web Developer Tool Bar

A must needed tool bar for developers,The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Features

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools like:-
View Anchor Information
View Color Information
View Document Outline
View Document Size
View Generated Source
View Meta Tag Information
The 'Clear Session Cookies'
The 'Display Element Information'
The 'Display Image File Sizes'
The 'Display Ruler'
The 'Display Topographic Information'
The 'Edit CSS' feature
The 'Show Comments'
Disable Proxy
Disable Strict JavaScript Warnings
Display Abbreviations
Display Page Magnifier
Display Page Validation
Outline Images With Oversized Dimensions
Outline Links With Ping Attributes
Outline Table Captions
Validate Local Accessibility
Clear All Private Data
Convert Select Elements To Text Inputs
Delete Path Cookies
Disable External Site Images
Disable Meta Redirects
Disable Minimum Font Size
Disable Print Styles
Display Alt Attributes
Display Div Order
Display Element Information
Display Line Guides
Display Object Information
Display Stack Levels
Display Table Depth
Display Table Information
Display Title Attributes
Edit HTML
Enable Form Fields
Make Frames Resizable
Make Images Full Size
Outline All Images
Outline Background Images
Outline External Links
Outline Headings
Outline Positioned Elements
Show Hidden Elements
Show Window Chrome
Small Screen Rendering
And many more..

Get it here
https://addons.mozilla.org/en-US/firefox/addon/60
http://chrispederick.com/work/web-developer/

Some other Web Development firefox Add-ons
https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4
https://addons.mozilla.org/en-US/firefox/addon/1843

Monday, July 7, 2008

Best of the Web Links

Friends here is a list of relevant links for web developers and designers In Web Roundups by Raj Dash,
Enjoy.

HTML + CSS

http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
50 Nice Clean CSS Tab-Based Navigation Scripts
Like tabbed interfaces? Hongkiat.com has over 50 CSS navigation scripts that use jQuery and other means to produce tab-based pages.

http://cssbuilt.com/index.php/2008/07/02/best-of-css-design-june-2008/
Best of CSS Design June 2008
CSS Gallery CSSBuilt gives us a selection of 32 great site design favorites, based on user submissions.

http://www.cssleak.com/news/June-s-Best-13-CSS-design-on-CssLeak.html
June's Best: 13 CSS Designs on CssLeak
Another gallery, CssLeak, offers a selection of their favorite CSS designs, as submitted by their users.


http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/
CSS Editors Reviewed
For those of you that do a lot of web design using CSS, if you're not already doing so, you might want to consider using a CSS editor. Smashing Magazine has a handy review of 19 CSS Editors for Mac, Windows and Linux platforms, as well as a list of some alternate tools.


http://www.alistapart.com/articles/fauxabsolutepositioning
Faux Absolute Positioning
Does CSS element positioning get you down when doing cross-browser testing? Eric Sol at A List Apart reveals a faux positioning technique that apparently requires no hacks. It works in all modern browsers (not sure about FF3) and older ones such as IE6 and IE5.5/Win, but not IE5/Mac (which has been discontinued).

http://www.devlounge.net/code/css-fun-with-floating-in-the-grid
CSS: Fun With Floating in the Grid
If you're interested in the grid-based approach to web design but not ready to use a CSS grid framework, check out Devlounge's simplified look at grid-like design.

JavaScript & JS Libraries

http://sixrevisions.com/javascript/mootools_tutorials_and_example/
20 MooTools Tutorials and Examples
MooTools fans should check out Six Revisions' list of MooTools tutorials and examples. The list is separated into beginner, intermediate/ advanced, and working examples.

http://www.webdevlounge.com/articles/jquery_resources/
jQuery Resources - 8 Essential Sites
Short and to the point, WebDevLounge gives their esential jQuery resource sites, including one I haven't heard of, jQuery for Designers - which ironically has mostly text on their home page.

http://lifedraft.de/projekte/dhonishow/
DhoniShow: Easy Inline Image Gallery
DhoniShow is an image Gallery script that works over Prototype 1.5+ (Script.aculo.us is optional). The result is an attractive inline gallery with transition effects. [via FortySomething]

http://www.webdevlounge.com/articles/mootools-and-jquery-ajax-shortcuts-for-champions/
jQuery: AJAX Shortcuts for Champions
Actually, the title's misleading because the article shows very simply how "to AJAX-ify any site through the copious use of either jQuery or Mootools." The demo code provides both GET/ POST examples for pulling data asynchronously.

Content Management Systems

http://sixrevisions.com/web_design/wordpress_designs/
25 Outstanding WordPress Designs
Six Revisions makes this

http://www.devlounge.net/code/getting-gravatars-on-your-single-posts-in-wordpress
Getting Gravatars on Your Single Posts in WordPress
Want to display an author gravatar on your WordPress post pages? It's incredibly easy. Thord Hendgren shows you how over at Devlounge.

Miscellanea

http://www.webdesignerwall.com/trends/2008-design-trends/
2008 Design Trends
WebDesignerWall's large collection of website screenshots is visually stimulating and catalogs some of the web design trends for this year.


http://www.positivespaceblog.com/archives/pdf-documents-designer/
30 Essential PDF Documents Every Designer Should Download
This article at Positive Space has enough links to articles, resources, and other info related to web and graphic design, coding, freelancing and other topics to keep you busy reading for awhile.

http://www.cssleak.com/news/19-Websites-to-Promote-your-Design-News.html
19 Websites to Promote Your Design News
CssLeak has a handy list of nineteen sites - some with voting - where you can submit design-related news and articles. Included in the list are some of our TUTS sites, where you can use the USER+ Community Link Feed to submit links.

http://www.search-this.com/2008/06/24/10-things-any-web-developer-worth-their-spit-should-know/
10 Things Any Web Developer Worth Their Spit Should Know
The title says it all. Search-This offers some must-know web development ideas/ concepts/ techniques. It's likely you know a lot of them, but it never hurts to be reminded.


http://webtecker.com/2008/06/12/10-free-chart-scripts/
10 Free Chart Scripts
Producing dynamic charts for websites probably doesn't come up as a requirement all that often, but it's good to know some of your options if it does. WebTecker lists ten free chart scripts based on JavaScript, Java, Flash or Sliverlight.

http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/
Flexible Layouts: Challenge for the Future
Those of you who have Firefox 3 probably know of some of the great new features such as Full Page Zoom. But what happens to web page layouts under FPZ and other new features? Some of you have commented at NETTUTS about how one demo or another doesn't work properly in FF3. And what about flexible layouts, mobile browsers, and other web design issues? Dirk Jesse, developer of the YAML CSS framework, guests at Smashing Magazine and discusses these issues plus how to produce flexible layouts with YAML.