CSS3 Please!跨浏览器的CSS规则生成器，支持：border-radius、 box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。

CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.

CSS3 Sandbox有一些列的CSS3生成器：线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。

@font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。

CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。

CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的“border- radius”属性。

Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。

CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。

JavaScript方案

Modernizr一个确实很有用的JavaScript库，可以检测HTML5/CSS3的原 生支持，并为你提供一种维护良好控制级别的方法，不管浏览器的能力。如果你更喜欢使用MooTools，你可以使用MooModernizr (MooTools 版本的Modernizr)

Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎，被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器，比如忽略选择器(escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。

YUI 选择器组件YUI CSS3 选择器组件，提供一个收集、过滤和测试HTML元素的稳定的简写方法。

ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。

CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本，然后在你的样式表中使用这些伪类选择器，然后IE就可以使用了。

参考指南

CSS 3.0参考手册
腾讯ISD WebTeam制作的一个CHM格式的参考手册，很全面，介绍+实例，推荐下载收藏；

我什么时候能用CSS3CSS3、HTML5、 SVG以及其它即将可用的页面技术的浏览器兼容性列表；

浏览器支持清单使用Modernizr库检测你的浏览器支持的“高级”特性，包括CSS3特性和 选择器的支持。

CSS3选择器测试自动运行大量的判断你的浏览器 是否支持一些CSS选择器的小测试；

SelectORacle一个提供CSS2和 CSS3选择器介绍的在线工具。简单的给它一些选择器，他就会返回选择器匹配的相关说明。

CSS3手册与快速指南提供当前CSS3规范的 列表，列出属性可用的值、常用的选择器模式参考，以type/单位组织，选择器类型参考和单位参考和信息(另有PDF 版本)；

CSS3伪类SitePoint的CSS参考的相 关部分内容；

CSS3 速查手册CSS3属性、选择器类型以 及可用的值的列表，PDF格式；

CSS3色彩名称

提供所有147种色彩的名字以及按照字母排序的值。

CSS3 教程和资源

Get Started with CSS 3 - 一个基本的 CSS3 使用指南。

Cascading Style Sheets Current Work - W3C 所做的 CSS3 标准的进展细节。

Border-image: Using Images for Your Border - 一份 CSS3 新增图像边框功能的使用指南。

Overview of CSS3 Structural Pseudo-Classes - 方便的 CSS3 结构化伪类参考图表。

Push Your Web Design Into The Future With CSS3 - 介绍了一些 CSS3 规范的新功能。

CSS3 Property Tests - 概述了目前 CSS3 特性的浏览器支持情况。

Rounded Corner Boxes the CSS3 Way - 一份使用 CSS3 新方法创建圆角效果的教程。

CSS3 Selectors Explained - 概述了一些 CSS3 选择器，包括选择器语法。

CSS3 Borders Preview - 介绍了一些 CSS3 新的边框类型，包括圆角边框和梯度边框。

Box Shadow - 为元素创建阴影效果。

RGBA Colors - RGB 颜色的 Alpha 透明效果使用指南。

CSS3 Multiple Columns - 利用比以往更简便的 CSS3 方法，创建多栏式布局。

@font-face in IE: Making Web Fonts Work - 让 Internet Explorer 支持 @font-face 属性。

Progressive Enhancement with CSS3: A Better Experience for Modern Browsers - 使用 CSS3 逐步增强 Web 表现力的教程。

CSS3 RGBA - 使用新的 RGBA 功能创建透明颜色。

CSS3 Opacity - CSS3 透明/不透明效果指南。

Multiple Backgrounds - 虽然目前只有 Safari 支持，但能够使用多背景图片是一项非常酷的新功能。

CSS3 Color Names - CSS3 支持 147 种不同的颜色名称（包括 17 种标准色及另加的 130 种色彩）。当然，同样支持 RGB 和十六进制颜色代码。

CSS3 Background Images (Sizing and Multiple Images) - 一份多背景图片的具体执行教程。

CSS Template Layout Module - 此模块将使设计更加先进，多栏 CSS 布局容易很多。

CSS at Ten: The Next Big Thing - 介绍 CSS3 的新功能，包括大量有关字体支持的资料。

Fonts Available for @font-face Embedding - 涵盖目前所有被 @font-face 属性所许可的网页字体，提供字体下载链接。

Introduction to CSS3—Part 5: Multiple Columns - 介绍了 CSS3 的多栏布局功能，并使用实例说明。

CSS3 Multiple Columns - 又一份方便的 CSS3 多栏功能参考手册。

Word-Wrap - 介绍 CSS3 的文字换行功能。

Liquid Faux Columns with Background-Size - 使用背景尺寸属性创建液体（自适应）栏式布局的教程。

Six Questions: Eric Meyer on CSS3 - 一篇关于 CSS3 及其对网页设计的未来影响的采访。

Semantic Code: Put More In, Get More Out - 一个快速教程，涉及 CSS3 选择器使用和语义，以及为网站添加新功能的方法。

The CSS3 ‘Box-Sizing’ Concept - 概述 box-sizing 属性的概念和工作方式。

Super Awesome Buttons with CSS3 and RGBA - 使用 CSS3 的 RGBA 特性建立很酷的网页按钮。

A Mock-Up Interface Using CSS3 Color - 使用 CSS3 的颜色模块创建和模拟桌面应用的窗口界面效果。

Enhance Internal Page Links - 改善网站内部链接的可用性。

Introduction to CSS3—Part 4: User Interface - 操纵元素 (element)，游标 (cursor)，框布局 (box layout)，和其他用户界面功能的教程。

Creating a Polaroid Photo Viewer with CSS3 and jQuery - 创建很酷的宝丽来照片风格的照片集。

Overriding the Default Text Selection Color with CSS - 改变 Sfari 和 Firefox 的默认高亮颜色。

Making an Image Gallery with :Target - 使用目标伪类 (:target pseudo-class) 创建图片画廊。

Styling Forms with Attribute Selectors—Part 1 - 关于表单样式中使用属性选择器代替 class 选择器的指南。

CSS: Transition Timing Functions - 介绍了 CSS3 的过渡期限 (transition-duration) 和过渡定时功能 (transition-timing-function) 特性。

CSS3 Corporate Fun - 使用下拉菜单和过渡效果建立企业式的导航栏。

CSS3 and International Text - 概述了 CSS3 国际性文本功能。

CSS Trick: Hidden Messages - 在文本中隐藏信息的 CSS3 技巧。

The Potential of Web Typography - 全面概述 @font-face 属性，及其潜在用途。

The Fundamental Problems with CSS3 - 讨论使用 CSS3 标准当前面临的问题。

CSS3 Cheat Sheet - CSS3 中的 PDF 文档包含功能。

CSS3 和 HTML 5 组合资源

A Marriage Made in Heaven? HTML 5 and CSS3 - 介绍 CSS3 和 HTML5 如何协同工作，展望网页设计的未来。

HTML 5 and CSS3: The Techniques You’ll Soon Be Using - 使用先进的 HTML5 和 CSS3 功能建立一个博客页面。

When Can I Use… - 查一查哪些浏览器支持 CSS3 和 HTML5 新特性，哪些浏览器不支持。

The Power of HTML 5 and CSS3 - 使用 HTML5 和 CSS3 技术结合开发的可能性概览。

HTML 5 资源

A Preview of HTML 5 - 提供了一些关于 HTML5 特性和优点的资料。

Yes, You Can Use HTML 5 Today! - 一些目前支持的 HTML5 特性和应用实例指南。

HTML 5 Cheat Sheet - 利用 HTML5 的新特性和功能打造可下载的 PDF 表。

Designing a Blog with HTML 5 - 一个利用 HTML5 建设博客站点的完整教程。

Coding an HTML 5 Layout From Scratch - 从底层向上创建一个 HTML 网站的完整指南。

HTML 5 Boilerplates - 一些可用 HTML5 样板的快速指南。

A Selection of Supported Features in HTML5 - 一张显示部分 HTML5 功能目前在不同的浏览器的支持情况的图表。

HTML5 id/class Name Cheatsheet - HTML5 中新 ID 和 Class 名称的备忘表。

Preparing for HTML 5 with Semantic Class Names - 概述 HTML5 新的结构元素，阐述如何准备在 HTML 4.0.1 或 XHTML 1.0 中使用语义类别名称。

HTML 5 Canvas—The Basics - 使用 HTML5 画布元素 (canvas element) 的完整指南。

HTML 5: Nav Ambiguity Resolved - 介绍 HTML5 中全新的导航元素。

HTML 5 + XML = XHTML 5 - 概览 HTML5 怎样和 XML 实现交互。

The Video Element - 介绍 HTML5 全新的视频元素。

更多资源

CSS3.Info

CSS3 Exciting Functions and Features: 30+ Useful Tutorials 来源于 Noupe 站点。

30 Essential CSS3 Resources 来源于 Carsonified’s Think Vitamin blog 博客。

20 Useful Resources for Learning about CSS3 来源于 Six Revisions 站点。

CSS3 Unleashed Tips, Tricks and Techniques 来源于 W3Avenue 站点。

20 Very Useful CSS3 Tutorials 来源于 Speckyboy Design Magazine 博客。

HTML5 Doctor HTML5 主题博客。

12 Resources for Getting a Jump on HTML 5 来源于 Cameron Moll 站点。

23 Essential HTML 5 Resources 来源于 Carsonified’s Think Vitamin blog 博客。

英文原稿 70 Must-Have CSS3 and HTML5 Tutorials and Resources | WebAppers
翻译整理 70+ 必备的 CSS3 和 HTML5 教程资源 | 脚本

标签 CSS3 , HTML5
链 接 70+ 必备的 CSS3 和 HTML5 教程资源

转载自 70+ 必备的 CSS3 和 HTML5 教程资源 | 脚本

Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your site.

How does your website function across all these options? It’s important that your website is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices. In this article, we’ll cover some basics of making sure your site is cross-browser-compatible, including snippets and resources to help you along the way.

The Problem

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.

So what are the options? The data about current browser share varies depending on the source and the region, but in general, Internet Explorer, Firefox, Chrome, Safari, and Opera make up most of the market share, with Internet Explorer dominating the market. Internet Explorer 8 has over 25% market share, Internet Explorer 6 has 215 and Internet Explorer 7 having 14%.

When there are so many different options out there, each running their own rendering engine, how do you ensure that your web design or application will hold up in each of them? That what we hope to cover and provide solutions for in this article.

How does your site perform?

So, how does your current site perform in the multitude of browsers that are out there? Why not check for yourself? If you don’t want to install all the major browsers out there on your own personal machine, here are some resources to help you out.

Adobe Browser Lab
Adobe Browserlab offers an awesome solution for viewing on demand screenshots of your site. This is usually my go-to program for testing in various browsers.

Browsershots
Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.

Browser Sandbox
Runs an application to view your site in a variety of browsers.

Browsrcamp
Allows you to test the compatibility of your design with Mac OS X browsers.

IE Tester
A free WebBrowser that allows you to check how your site looks like on IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.

Browser Proofing Your Site

So turns out your site doesn’t function as expected across all the major browsers? Don’t worry. It happens to the best of us. Now it’s time to go about fixing it.

Validate

First off, validate your site. Ironing out those XHTML and CSS errors can often solve those pesky browser bugs. I suggest running your site through W3’s XHTML Validator and CSS Validator.

CSS Reset

Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:

Eric Meyer’s Reset Reloaded

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

YUI’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img {
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
abbr,acronym { border:0;}

Either include thet CSS reset styling at the top of your stylesheet, or have Yahoo host it and simply link to it in your HTML-documents, right before your own stylesheet:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

Conditional Statements

Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.

One of the most common uses of conditional statements is to include a stylesheet if the browser is Internet Explorer. By doing this, you can correct some bugs that exist in your code and override your current stylesheet.

To use conditional statements, simply include the statement in the head section of your XHTML, right below the stylesheet inclusion.

Include a stylesheet if the browser is IE

<!--[if IE]>
        <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Target Specfic Versions of IE

<!--[if IE6]>
        <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

(Of course, you can replace IE6 with any version of IE)

PHP Browser Detect

If you are looking for a more specific way of targeting browsers and even operating systems, then you should consider checking out Techpattern’s PHP Browser Detection Script. It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.

jQuery Browser Detection

For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site, check out TVI Design’s Browser Detection using jQuery. The script adds a class to the body, which you can then style in CSS.

Mobile Devices

Things are changing. New devices are emerging as a medium for browsing the web these days. Whether it’d be smartphones, iPods or an iPad, there is a new enviornment for web design and as they become increasingly popular, it means that you must also take them into consideration when designing a site.

What does my site look like in a mobile device?

How about testing your site in some web based mobile emulators? If you are looking to test your design in a mobile device, here are some great resources:

Test iPhone
Simulator for quickly testing your iPhone web applications

iPhoney
iPhoney is a free application you can download in order to simulate a iPhone browsing experience. Includes support for rotating, zooming, and even turning off plugins like Flash.

MobiReady
Excellent tool for testing in mobile devices. Provides feedback including test results, options, and emulators.

Mobile Device Emulator
A great way to test your site across a multitude of mobile devices.

Ways to make your site mobile friendly

So how do you go about making your site mobile friendly? Well, if you are interested in pursuing a mobile version of your site, here are a few ways of doing so.

Redirect Users on a Mobile Device
An easy way of making sure your site is mobile-friendly is to redirect users viewing it from a mobile device to a certain “plain” version of the page on your server. Some of the easiest ways of doing this include Studio Hyperset’s Mobile Redirect Script, or using Mobiforge’s Lightweight Device Detection in PHP.

Mobify
Mobify allows you to design a mobile version of your site based on your current design. It also allows for traffic stats and advertising options.

Mofuse
Mofuse lets you create a mobile version of your blog for free. It’s pretty easy, and only takes a bit of time.

http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/

Create WordPress themes

http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/

http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.htm

http://themeshaper.com/wordpress-themes-templates-tutorial/

http://net.tutsplus.com/site-builds/how-to-create-a-wordpress-theme-from-scratch/

How to convert any web template into a WordPress theme

http://max.limpag.com/2006/09/01/how-to-convert-any-web-template-into-a-wordpress-theme/

40 Exceptional “CMS Enabling” WordPress Plugins

http://www.noupe.com/wordpress/wordpress-cms-plugins.html

101 Techniques for a Powerful CMS using WordPress

http://www.noupe.com/wordpress/powerful-cms-using-wordpress.html

Not every designer has the time to start from scratch on projects, these PSD files help you to edit each one to suit your needs for various projects you may be designing for. These are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products. They include great up-to-date files of products such as; iPhone, Blackberry, PSP and Nintendo DS.

Mobile Phone PSDs

Some incredible phone PSD files here found on DeviantART; iPhone, Nokia 5800, HTC, Nexus one and Blackberry to name a few. All the files are the ownership of the owners stated and can be downloaded via the links given with each file showcased here.

iPhone PSD

Created by Manicho

DeviantART link

HTC Incredible Smartphone

Created by Zandog

DeviantART link

Nokia 5800 Xpress Music

Created by MK Graphics

DeviantART link

RIM Blackberry

Created by Digital Phenom

DeviantART link

TV Mobile

Created by Leozerosty

DeviantART link

Nexus One

Created by Zandog

DeviantART link

Blackberry Bold

Created by Just flik Walk

DeviantART link

SE Advert

Created by Siostranosy

DeviantART link

Gaming Console PSDs

Some incredible game console PSD files here found on DeviantART; Xbox, Sony PSP, Nintendo Wii to name a few. All the files are the ownership of the owners stated and can be downloaded via the links given with each file showcased here.

Playstation 3

Created by Bobby Perux

DeviantART link

Sony PSP

Created by Digital Phenom

DeviantART link

XBox 360

Created by Bobby Perux

DeviantART link

Nintendo DS Lite

Created by Jbensch

DeviantART link

Nintendo Wii Black

Created by Zandog

DeviantART link

Computer & Music Devices PSDs

iPod Touch

Created by Kol

DeviantART link

Ipod Nano

Created by Spud 100

DeviantART link

iPod Nano Chromatic

Created by Zikkzak

DeviantART link

Microsoft Zune Music Player

Created by Digital Phenom

DeviantART link

Dell Vostro

Created by Digital Phenom

DeviantART link

Macbook

Created by Obsillion

DeviantART link

Apple Keyboard

Created by Djeric

DeviantART link

Apple Remote

Created by bobby Perux

DeviantART link

Apple Display

Created by Djeric

DeviantART link

HDTV

Created by Nurutheone

DeviantART link

Headphones

Created by Nurotheone

DeviantART link

A slideshow is a display of a series of chosen pictures, which is done for artistic or instructional purposes. And if the slideshow is cool and sexy , it would surely add glamor and feeling of impressiveness. Here is the list of 14 cool galleries and slideshows using javascript which may addimpressive looks to your web application.

1. Pikachoose

.

2. Workshop.rs

.

3. Gadgetinspiration

.

4. Newmediacampaigns

.

5. Serie3.info

.

6. Dev.herr-schuessler.de

.

7. Smoothgallery.jondesign.net

.

8. Gayadesign

.

9. Nivo.dev7studios.com

.

10. Pirolab.it

.

11. Project66.net

.

12. Eyecon.ro

.

13. Jcoverflip

.

14. Cssglobe

.

That’s all
Cheers!!

You may also be interested in one of these older posts
Awesome And Free Fonts For Web Designers
13 Magnificent Free WordPress Portfolio Themes
13 Free Professional Looking WordPress Magazine Style/CMS Themes
25 Essential Tutorials And Resources For Learning CSS3

Page Rank

1. Ranking Tool

Get a overview of your website’s ranking

2. PageRank Lookup

Check the PageRank for a website

3. PageRank Prediction

Predicted PR of a site

4. Multi Rank Checker

View your Google PageRank and Alexa Ranking in bulk

5. PageRank Checker

View your Google PageRank on differnet Google servers

Links Related

6. Reciprocal Link Checker

Check whether your link partners are linking back to your website

7. Text Link Quote

A popularity score given to a website based on inbound links

8. Link Price Calculator

A tool for checking the price of links

9. Link Checker

Check your links to see if it’s still valid or not

10. Link Popularity

Checks the total number of web pages which link to a website

11. Link Price Calculator

Help to determine the approximate amount you should be paying (or charging) per month for a text link (ad) from each and every page of the specified website

12. Site Link Analyzer

Analyze a given web page and return a table of data containing columns of outbound links and their associated anchor text

13. URL Rewriting

Convert dynamic URLs into static looking HTML URLs

14. Link Extractor

Extract links from a specific web page

15. Link Shortener

Shorten a web address

16. Backlink Anchor Text Analyzer

Check link text used by your backlinks to Link to your wesbite

Keyword Related

17. Keyword Verification Tool

Checks to see if your site is in the top three pages of a search engine result for a specific keyword

18. Keyword Density Analyser

Another SEO tools for keywords

19. Keyword Cloud

A visual representation of keywords used on a website

20. Keyword Density

Another SEO tool for checking keyword density

21. Keyword Difficulty Check

See how difficult it would be to rank for specific keywords or phrases

22. Keyword Optimize

Optimizer your keywords with this tool

23. Keyword Suggestion Tool

Find related keywords matching your search

Sitemap

24. XML Sitemaps Generator

Build your Site Map online (XML, ROR, Text, HTML)

25. GSiteCrawler

Google (and Yahoo!) Sitemap Generator for Windows

26. Validate XML Sitemap

Search Engine Optimizion Tool for validating your xml sitemaps

Search Engines

27. Google Analytics

Tells you everything about your visitors

28. Google Banned Checker

Check whether a site is banned by Google or not

29. Search Engine Bot Simulator

SEO Tool to simulate search engine parsing of webpages and display discovered links.

30. Indexed Pages

Check the no. of indexed pages for your blog

31. Spider Simulator

Simulates a search engine by displaying the contents of a web page

32. Search Engine Friendly Redirect Checker

Checks the exact HTTP headers that a web server is sending with an HTTP response.

33. Search Engine Position

Locate your search listings on Google and Yahoo!

34. Search Listings Preview

Preview your website on Google, MSN and Yahoo! Search

HTML Related

35. HTML Encrypt

Hide your HTML source code

36. HTML Optimizer

Optimize and clean your HTML source code

37. HTTP Headers

Extract the HTTP Headers of a web page

38. HTTP Headers Viewer

Check HTTP headers for any specific URL

39. Meta-tags Extractor

Extract meta-tags information from a web page

40. Meta-tags Generator

Generate and configure your meta-tags

41. Meta Analyzer

Analyze a website’s meta tags

42. Meta Tag Generator

Help you to generate meta tags

43. Source Code Viewer

View the source code of a page

Web stats

44. Whos.Among.us

Real-time stats for your website or blog.

45. Statcounter

Famous free web tracker

46. HiStats

Free, real time updated web stats service

47. Addfreestats

Provide free website statistics

Domain related

48. Alexa Traffic Rank

View and compare Alexa Ranking graphs

49. Domain Age Tool

Find out the age of your competitor’s domains

50. Domain Stats Tool

Get all kind of statistics of your competitor’s domains

51. Domain Availability

Check the availability of domains

52. Domain Look-up

Retrieve a range of information about a domain

53. Domain Whois

Retrieve domain whois information

54. Instant Domain Checker

Check the availability of domains instantly

55. Ping Test

Check the presence of an active connection

56. Reverse IP/Look-up

Resolve a host to an IP address

57. Server Status

Check if your website is online or offline

58. Website Speed Test

Find out how fast your website loads

59. What Is My IP Address

Shows your ip address

60. IP to City

Determine the Country, City, Latitude and Longitude of an IP Address

61. Website to Country

Determine the Country in which the specified website is Hosted

Google

62. Spam Report

Reporting Spam to Google Use Google to search your website

63. Website Sebmission

Submit your website to Google

64. Web Alerts

Monitor Keyword Phrases

65. Guidelines

Googles Guidelines for Websmasters

66. Facts

Facts for Webmasters

67. Contact Google

Having Trouble? Contact Google Directly

Search Engine Submissions

68. Google

69. Yahoo

You must have an account for this

70. Yahoo Directory Help

71. Yahoo Express Submit TOS

72. Yahoo Product Submit

73. MSN

74. Submit Express

75. Alexa

76. AOL

77. DMOZ Instructions

78. DMOZ Resource Forum

This is where you go when you website doesn’t show up in DMOZ after you have submitted

79. ExactSeek

Keyword Suggestion Tools

80. WordTracker & Overture Suggestions

This is the best one of the three

81. Link Analyzer

Analyze the ratio of internal links vs. external links.

82. Link Appeal

Want to know whether or not you actually want your link on that page?

83. Link City

This place has EVERY tool under the sun for everything you could ever possibly want

84. Link Reputation

Reveals backlinks pointing to the target URL along with a link survey for eack backlink.

85. Google PR Tools

A fantastic PageRank tool.

86. Protect Your e-mail address

Obfuscates your e-mail so spambots don’t pick it up from the Internet

87. Digital Points Ad Network

After using all of the tools and more on this page. This has helped out the rankings faster than anything else.

88. Sandbox Detection Tool

Is your website being sandboxed?

89. Spider Simulation

See what the spider sees on your website

90. SEO-Toys

These are some things that I had in my favorites. Some of them are okay.

91. Multiple SEO Tools

This website has a variety of misc. tools on it that you can use to better your search engine rankings.

92. Bot Spotter

This is a phenomenal script that will track what bots hit your website at what times. (Runs on PHP enabled websites)

93. Net Mechanic

This will break your website down and tell you any errors that you may be unaware of.

94. Statcounter

This will track your clients throughout the dynamically created pages of your website. This is a free service.

95. Dr. HTML

This will test your website for any errors that you may be unaware of and tell you how to fix them.

96. Page Rank Calculation

Calculates the PageRank of a webpage.

97. Adwords Suggestion

98. Overture Suggestion

Link Exchanging

99. Links Manager ($20.00US /mo)

This is great for the beginner however you will find out that you need to majorly adjust your pages manually in order to pread page rank throughout them otherwise you end up with 20 pages with no PR and 1 page with PR.

100. Page Rank Finder

101. Link Appeal

Website Design & Tools

Miscellaneous

102. FEED Validator

For Atom and RSS

103. W3C Markup Validation Service

Check for conformance to W3C Recommendations and other standards

104. Kontera Ads Preview

Preview Kontera Ads on your website

105. Online spell checker

Simple online spell checking tools

106. Browser Screen Resolution Checker

Shows what your site looks like with different screen resolutions

107. Your Browser Details

View your IP address and your browser details

108. Anonymous Emailer

Send e-mails to users anonymously

109. md5 Encrypt

Encrypt text to MD5

110. Online Calculator

A simple online calculator

111. ALink Reciprocal Link Checker

Checks Reciprocal Links

112. AMeta Meta Tag Editor

Ameta Meta tag editor

113. XML Sitemap Maker

Makes simple XML sitemaps

114. RSS Feed Maker

Simple RSS feed maker

115. Webpage Size Checker

Checks the size of the webpage

Website Design & Tools

116. Search Engine Relationship Chart

Bruce Clay does an excellent job of keeping this updated.

117. Link Popularity Checker

Checks the popularity of a link

118. Character Counting

This is great when optimizing your title or meta tags

119. Ascii-Dec-Hex Conversion Code Chart

Decimal to hex conversion chart

120. Ascii-HTML View Conversion Chart

This is an excellent resource when placing ascii code on your website. Remember to use the correct character encoding)

121. Ascii Chart in .GIF Format

An Ascii chart in GIF Format

122. Customer Focus Tool

Tells you whether your website is focused on your customers or not)

121. Dead Link Checker

Doesn’t crawl links within Frames or JavaScript)

122. Adsense Simulator

This will give you an idea of what ads will be displayed on your website before you place them

123. Page Rank Finder

This is a great tool to find quality websites with the PR that you are looking for to exchange websites with.

124. Keyword Analysis Tool

This tool is a must. It’s quick and easy to use

125. Keyword Density Analyzer

Analyzes the density of a keyword

126. Keyword Difficulty Checker

You will need a Google API for this one

127. Free Google API

Google api for making applications

128. Free Forms for your website TFMail

129. Validate Your HTML

130. HTTP Error Code Meanings

131. Keyword Tracking

132. Link Checker

133. Character Encoding

134. Converting Hex to Dec or Vias Versa

I’m going to share with you my latest collection of Magazine style WordPress themes in this blogpost. I hope you’ll find it convenient to use – IMO, themes listed below are absolutely stunning, user friendly, and I personally like them a lot. In fact, I was a little picky when I first drafted this post and decided to list out only the free themes. Feel free to share this post around and do leave a comment if you knew any other themes that I should get it listed here.

Download and Demo Magazine Style WordPress Themes

1. WP Clear

Details: Download / Demo

2. FX Mag

Details: Download / Demo

3. Smashing MultiMedia

Details: Download / Demo

4. iGames

Details: Download / Demo

5. Hamasaki Theme

Details: Download / Demo

6. IsoTherm News

Details: Download / Demo

7. Lap of Luxary

Details: Download / Demo

8. Mimbo Theme

Details: Download / Demo

9. Subtly Made

Details: Download / Demo

10. Trista

Details: Download / Demo

11. The Morning After

Details: Download / Demo

12. Small Magazine Theme

Details: Download / Demo

13. ColorBold

Details: Download / Demo

14. Pro Start

Details: Download / Demo

15. WebFolio

Details: Download / Demo

16. SimpleScheme Mag

Details: Download / Demo

17. RockWell

Details: Download / Demo

18. FreshMotar

Details: Download / Demo

19. PixDesign

Details: Download / Demo

20. Bueno

Details: Download / Demo

21. Berita

Details: Download / Demo

22. Magiting

Details: Download / Demo

23. Render Magazine

Details: Download / Demo

24. OrganicMoss Theme

Details: Download / Demo

25. TypoPrint

Details: Download / Demo

26. Moi Magazine

Details: Download / Demo

27. Creative by Nature

Download / Demo

28. FakeBlog

Details: Download / Demo

29. Magazeen

Details: Download / Demo

30. Milano

Details: Download / Demo

31. Elegant News

Details: Download / Demo

32. WordPress Blues

Details: Download / Demo

33. PureMagazine

Details: Download / Demo

34. Urbane

Details: Download / Demo

35. Visoko

Details: Download / Demo

36. Magnum Black

Details: Download / Demo

37. Vodpod

Details: Download / Demo

38. Brightness

Details: Download / Demo

39. DesignMagz

Details: Download / Demo

40. Equilibrium

Details: Download / Demo

Storing Data

Use data method and avoid storing data inside the DOM. Some developers have a habit of storing data in the HTML attributes like fx.:

$('selector').attr('alt', 'data being stored');
// later the data can be retrieved using:
$('selector').attr('alt');

HTML attributes is not meant to store data like that and the “alt” as a parameter name does not really make sense. The right alternative in most cases is using the data method in jQuery. It allows you to associate data with an element on the page.

$('selector').data('paramtername', 'data being stored');
// then later getting the data with
$('selector').data('paramtername');

This approach allows you to store data with meaningful names and it is more flexible as you can store as much data as you want on any element on the page. For more information about data() and removeData(), see here jQuery internals One classical use of this is saving the default value of a input field because you want to clear it on focus.

<form id="testform">
 <input type="text" class="clear" value="Always cleared" />
 <input type="text" class="clear once" value="Cleared only once" />
 <input type="text" value="Normal text" />
</form>

$(function() {
 //Go through every input field with clear class using each function
 //(NB! "clear once" is two classes clear and once)
 $('#testform input.clear').each(function(){
   //use the data function to save the data
   $(this).data( "txt", $.trim($(this).val()) );
 }).focus(function(){
   // On focus test for default saved value and if not the same clear it
   if ( $.trim($(this).val()) === $(this).data("txt") ) {
     $(this).val("");
   }
 }).blur(function(){
   // Use blur event to reset default value in field that have class clear
   // but ignore if class once is present
   if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
     //Restore saved data
     $(this).val( $(this).data("txt") );
   }
 });
});

Demo here

Columns of equal height

This tip show you how to use two CSS columns, and make them having exactly the same height?

function equalHeight(columns) {
    tallest = 0;
    columns.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    columns.height(tallest);
}

/*
How it works:
$(document).ready(function() {
    equalHeight($(".box"));
});
*/

Test and improve you jQuery selector skills

This jQuery selector Lab is really cool and can be used free online and you can even download the lab and use it off-line. There’s a test page with most of the combination of html fields you can imagine and then a very long list of predefined selectors you can try. If that is not enough you can also type in your own selectors.

Target blank links

Did you know that XHTML 1.0 Strict don’t allow “target=blank” attribute on links? Still it is quite useful to keep visitors on the site when they press an external link. A good solution to this problem should be using JQuery to make links opening in new windows. The rel=”external” attribute is used to match the links that we want to open in a new window.

$('a[@rel$='external']').click(function(){
  this.target = "_blank";
});

/*
This is how it works:
<a href="http://www.tripwiremagazine.com/" rel="external">tripwiremagazine.com</a>
*/

Test if a jQuery collection contains any elements

If you need to test if a jQuery collection contains any elements you can simply try accessing the first element like this:

if($(selector)[0]){...}
// or you may use
if($(selector).length){...}

Let look at an example:

//ex. if you have this html on a page
<ul id="shopping_cart_items">
  <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li>
  <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>
  <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>
</ul>

<pre lang="javascript" escaped="true">...
//The condition in this if statement will evaluate to true because we have two
// input fields that match the selector and the <statement> will be executed
if($('#shopping_cart_items input.in_stock')[0]){<statement>}

Use Callback to synchronize Effects

If you want to ensure that events occur one after the other you should use callbacks. Functions allow us to register a callback once the operation is over like this: slideDown( speed, [callback] ) ie. $(’#sliding’).slideDown(’slow’, function(){… Try try the example below here.

<style>
 div.button    { background:#cfd; margin:3px; width:50px;
   text-align:center; float:left; cursor:pointer;
   border:2px outset black; font-weight:bolder; }
 #sliding      { display:none; }
</style>
<script>

$(document).ready(function(){
// Use jQuery to change look of div once clicked and the event to
//start off the slide effect
 $("div.button").click(function () {
   //div.button will now look like a pushed down button
   $(this).css({ borderStyle:"inset", cursor:"wait" });
   //The hidden #sliding will now slide down and use callback to start the
   //slideup once it completes
   $('#sliding').slideDown('slow', function(){
     $('#sliding').slideUp('slow', function(){
       //once the slide up is over the callback change css for button back
       $('div.button').css({ borderStyle:"outset", cursor:"auto" });
     });
   });
 });
});
</script>

Use Events to control DOM Elements and Custom Objects

One of the most useful parts of jQuery is it’s ability to attach events to objects within a web page. When these events are triggered you can then use a custom function to do pretty much whatever you want with the event.There is a wide range of Events that are supported by jQuery and you will be able to create your own as well. Binding events to page elements doesn’t get much easier and elegant here a few examples.

//Bind click event to a paragraph and write click coordinates to the page
$("p").bind("click", function(e){
  var str = "( " + e.pageX + ", " + e.pageY + " )";
  $("span").text("Click at coordinates: " + str);
});

//Binding multiple events is also simple and
$("p").bind("mouseenter mouseleave", function(e){
  //toggleClass adds the specified class if it is not present, removes
  //the specified class if it is present.
  $(this).toggleClass("mouse-over");
});

Not only can you bind events to DOM elements as simple as just illustrated. With jQuery you can actually bind a custom event to ANY object. Here is an example.

}
function shoppingCart() {
  // Do general shopping cart stuff here...
};

var myShoppingCart = new shoppingCart('personalShoppingCart');
jQuery(myShoppingCart).bind('addItem', function() {
  // Custom event handling for adding items to the shopping cart...
});

// Trigger custom event:
jQuery(myShoppingCart).trigger('addItem');
);

Learn to use Custom Selectors

On top of standard CSS selectors jQuery allow you to define custom selectors that makes your code even more simple.

$.expr[':'].mycustomselector= function(element, index, meta, stack){
    // element- is a DOM element
    // index - the current loop index in stack
    // meta - meta data about your selector
    // stack - stack of all elements to loop

    // Return true to include current element
    // Return false to explude current element
};

// Custom Selector usage:
$('.someClasses:test').doSomething();

Lets take a look at an example. This custom selector will return elements in the scope specified with attribute “rel”:

$.expr[':'].withRel = function(element){
  var $this = $(element);
  //simply returning elements where rel is not empty
  return ($this.attr('rel') != '');
};

$(document).ready(function(){
//Using the custom selector is simple and the collection returned support chaining
// as illustrated here to apply some css to the returned elements
 $('a:withRel').css('background-color', 'green');
});
...
<ul>
  <li>
    <a href="#">without rel</a>
  </li>
  <li>
    <a rel="somerel" href="#">with rel</a>
  </li>
  <li>
    <a rel="" href="#">without rel</a>
  </li>
  <li>
    <a rel="nofollow" href="#">a link with rel</a>
  </li>
</ul>

Remove a word in a text

It is quite simple with jQuery to remove words in a element text? The following code can be easily modified to replace a word by another. In this case “wordtokill” is replaced by “wordtolive”.

var element= $(’#id’);

element.html(element.html().replace(/wordtokill/ig, “wordtolive”));

Make entire Elements click-able

A lot of menus are created using simple <li> lists and css. It would be nice for the website usability if navigation was provided for the entire <li> and not just for the link text. jQuery makes this possible in a pretty simple way by taking the href (url) from the embedded link.

<ul>
  <li><a href="home">home</a></li>
  <li><a href="home">about</a></li>
  <li><a href="home">contact</a></li>
</ul>
...
//selector select all li within the ul and then we make them clickable.
$("ul li").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;
});

Preloading images

Generally it is a good idea to preload images if they are used in javescripts.

<pre>//Define function that preloads a defined list
//of images (arguments for the function).  

jQuery.preloadImages = function(){
  /Loop through the images
  for(var i = 0; i<arguments.length; i++){
    jQuery("<img>").attr("src", arguments[i]);

  }
}
// You can use usage the script this way:
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

Disable right-click contextual menu

As with other things we have been doing for years using javascript jQuery makes it simpler and more elegant. Of cause you can use this for much more. You may do something when the contextmenu event is fired.

<pre><pre>$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
})

Make code simpler using group queries

A useful way to make the code simpler and easier to read is by grouping the queries for elements that need the same treatment.

// Don't do it like this as it takes up unnecessary space and takes time to write
$('div.close').click(doSomething);
$('button.close').click(doSomething);
$('input.close').click(doSomething);

// Simply use group queries in the selector if you have to
//apply same operation to them all
$('div.close, button.close, input.close')
    .click(doSomething);

Test your code well

jQuery comes with a unit test framework called QUnit. Writing tests is quite easy and allow you to confidently modify your code while ensuring that it still works as expected. Here is how it works:

<pre>//Separate tests into modules.
module("Module B");

test("some other test", function() {
  //Specify how many assertions are expected to run within a test.
  expect(2);
  //A comparison assertion, equivalent to JUnit's assertEquals.
  equals( true, false, "failing test" );
  equals( true, true, "passing test" );
});

Minimize download time

Most browsers only download one script at the time and if you have several scripts being loaded on every page it can impact your download time. You can use Dean Edwards service “packer” to compress your scripts and make download faster. You need to maintain a development version and a runtime version as all you in-line comments will be lost. You will find it here.

Another solution that take this to the extreme is interesting to take a look at. Basically it is a server based PHP script that combine javasctipt files and compress them in a easy to maintain approach. Take a look at and see if you can use the idea and some elements of the concept “Make your pages load faster by combining and compressing javascript and css files“.

Logging to the Firebug console in jQuery

Firebug is one of my favourite Firefox extensions providing tons of tools in a very usable structure to aid you in HTML+CSS+JavaScript development. Obviously it is worth having just for it’s excellent inspection feature allowing you to jump into the html and css and learn in a visual way what elements of the page is rendered by what code. As a jQuery and general Javascript developer Firefox also has good support for logging in your JavaScript code. The easiest way to write to the Firebug console looks like this:

console.log("hello world")

You can pass as many arguments as you want and they will be joined together in a row, like

console.log(2,4,6,8,"foo",bar)

As a jQuery developer it even gets better using a tiny extension that Dominic Mitchell came up with to log any jQuery object to the console .

jQuery.fn.log = function (msg) {
    console.log("%s: %o", msg, this);
    return this;
};

With this extension you can simply call .log() on the object you are currently addressing fx.:

$('#some_div').find('li.source > input:checkbox')
    .log("sources to uncheck")
    .removeAttr("checked");

Use ID as Selector whenever possible

Selecting DOM elements using the class attribute is simpler than ever using jQuery. Even though it is simple it should be avoided whenever possible as as selecting using ID is much faster (In IE the class selector seams to loop through the entire DOM why generally it should be avoided). Selecting elements using IDs is fast because the browsers have the native getElementByID method that jQuery will use for IDs. Selecting classes still requires the DOM to be traversed behind the scene and if it is a large DOM and you make several lookups the performance impact can be significant. Let take a look at this simple html code:

<div id="main">
<form method="post" action="/">
  <h2>Selectors in jQuery</h2>
  ...
  ...
  <input class="button" id="main_button" type="submit" value="Submit" />
</form>
</div>

...
//Selecting the submit button using the class attribute
//like this is much slower than...
var main_button = $('#main .button');

//Selecting the submit button directly using the id like this
var main_button = $('#main_button');

Use Tags Before Classes

When you are selecting through tags jQuery will use the native browser JavaScript method, getElementsByTagName(). ID is still faster but this is still much faster than selecting with a class name.

<ul id="shopping_cart_items">
  <li><input class="in_stock" name="item" type="radio" value="Item-X" /> Item X</li>
  <li><input class="3-5_days" name="item" type="radio" value="Item-Y" /> Item Y</li>
  <li><input class="unknown" name="item" type="radio" value="Item-Z" /> Item Z</li>
</ul>

It is important to prefix a class with a tag name (here this is “input”) and then it is important to descend from an ID to limit the scope of the selection:

var in_stock = $('#shopping_cart_items input.in_stock');

Cache jQuery Objects

Caching an object before working with it is essential for performance. You should neverdo like this:

<li>Description: <input type="text" name="description" value="" /></li>
...
$('#shopping_cart_items input.text').css('border', '3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color', 'red');
$('#shopping_cart_items input.text').val("text updated");

In stead cache the object and work on it. The example below should really use chaining but it is just for illustration.

var input_text = $('#shopping_cart_items input.text');
input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");

//same with chaining:
var input_text = $('#shopping_cart_items input.text');
input_text
 .css('border', '3px dashed yellow')
 .css('background-color', 'red')
 .val("text updated");

Bind certain jQuery functions to $(window).load event

Most jQuery code examples and tutorials instruct us to bind our jQuery code to the $(document).ready event. In many cases this is OK but since $(document).ready occurs during page render while objects are still downloading it may cause problems for some types of scripts. Functionality such as binding visual effects and animations, drag and drop, pre-fetching hidden images etc. could benefit from being bound to the $(window).load as it will ensure that all dependant elements are ready for use.

$(window).load(function(){
 // Put your jQuery functions that should only initialize after the page has loaded.
});

Use Chaining to limit selectors, make the code more simple and elegant

Because JavaScript supports chaining and because it works across line breaks you can structure your code like this. This example first removes a class on an element and then adds another to the same element.

$('#shopping_cart_items input.in_stock')
    .removeClass('in_stock')
    .addClass('3-5_days');

If needed it is really simple and useful as well to create a jQuery function that support chaining.

$.fn.makeNotInStock = function() {
    return $(this).removeClass('in_stock').addClass('3-5_days');
}

$('#shopping_cart_items input.in_stock').makeNotInStock().log();

Loading latest jQuery version from jquery.org

You can actually load the latest jQuery version using this code:

<script src="http://code.jquery.com/jquery-latest.js"></script>

This is handy if you quickly want to try out an idea for a script with the latest version. As you may know you can also load jQuery from ajax.googleapis.com as shown in #1 - Load the framework from Google Code here.

Load the framework from Google Code

Google have been hosting several JavaScript libraries for a while now on Google Code and you may want to load it from them instead of from your server.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>

Use Cheat Sheets

Most people can’t remember a lot of details and even though programmers tend to be better that the average the amount of information they need to have instant access too is devastating. Having a few cheat sheets printed out and placed next to the monitor is a good idea to speed up programming and to improve the code quality.

jQuery 1.4 API Cheat Sheet