HTML5 Please is an interactive compatibility chart of HTML5/CSS3 features to find out "in which browsers they are supported (or not)".

Using a smart search bar, it is possible to filter the results with browser or device support, type (HTML5 or CSS3 elements/properties) and more.

Every item is described shortly and an opinion on whether they should be used with fallbacks or polyfills (with links to them) are shared.

The site is simply a must-bookmark for anyone designing with the new web technologies and need a guide for quickly checking the support for each property/element.

It seems like there is almost no limit in minimizing the weight of the web pages we are creating.

For the JavaScript part, 140byt.es (a tweet-sized, fork-to-play, community-curated collection of JavaScript) is sharing a set of very useful tips for saving bytes.

They are simply smart replacements for the functions, equations, loops, etc that we are regularly using.

An example from conditionals:

• Before: if(a)if(b)return c
• After: return a&&b&&c

A good number of bytes saved : ). The bytes saved are definitely minimal but trying to keep things small and focusing on this is definitely a good habit (but also it is worth considering that such usage can make the code unreadable for other coders).

With the wider use of HTML5 video and the increasing number of ready-to-use players around, it is hard to choose "which player to use".

VideoSWS is a collection and comparison of HTML5 video players which helps finding the best and/or the most suitable player for your project.

It lists all the well-known players, shows the features supported/unsupported under titles like Flash fallback, iOS compatibility, subtitles, audio, JS library required and more.

Also, it is possible to test each player (with a default video or any custom input) and read personal comments of the VideoSWS creators about them.

We all know robots.txt, the text file that is uploaded to the root folder of websites and helps us communicate with the search engine bots for telling them which pages to not to index.

What if we want to communicate with humans and tell them who built the website? There is usually not a suitable space for this in websites and visitors may not be interested in seeing such an information inside "about" pages (in most cases).

This is where Humans.txt, which is an initiative for knowing the people behind a website, comes in.

Just like robots.txt, you upload a humans.txt file to the root folder of the website and can mention every detail that "careful eyes" would be interested in learning about the team behind, the designers, developers, copywriters, etc.

It won't be wrong to expect it getting popular as some big guys like Google or Flickr already have it. And, WRD has it too : ).

There are many websites where you can find documentation for the new properties CSS3 brings but  you'll probably love this the most.

css3files is an awesome website which guides users about CSS3 properties with a very friendly information and interface.

It explains every property in detail with visual guides pointing to "what every value is used for" and there are examples (with outputs).

The website also has a browser compatibility chart and a list of links to other good resource for each item.

In general, JavaScript is a pretty straightforward language where anyone can learn the basics within hours.

And, like any other language, some common mistakes and bad practices -which can be avoided easily- exist.

JavaScript Garden is a website (it is open source) which documents these details to help non-expert JavaScript programmers.

The project is also handy as it is sometimes hard to debug JavaScript code (specially for beginners) because of unfriendly errors in some situations.

To sum up, bookmarking the project and referring to its related category in case of a hard-to-fix error would be good idea.

Today, almost every web designer/developer is a user of JavaScript frameworks which ease our daily development tasks.

JS Libs Deconstructed is a project which helps us understand the code and logic behind them better by visually and interactively deconstructing the internal code of them.

Currently, there are 3 of the popular JS frameworks included: jQuery, Prototype and MooTools where you can navigate the code of each easily by blocks, within a hierarchy.

Also, every function and property is linked to the original documentation which is a good way to learning more about them.

Google is providing lots of tools for web designers/developers and almost all of them have their APIs for easier integration with 3rd party services.

If you're a frequent user of these resources and want to reach them easier, Google has a web page specifically for you: Google APIs & Developer Products.

The page lists all development-related resources of Google with their logos and highlights the ones according to their categories.

A must-bookmark for everyone into web development.

Website previews were always a part of web content: the thumbnails in CSS galleries, a website screenshot in an article, etc.

They were static as expected. But for the last few years, using live or instant previews became much easier which is a far better experience (for the reasons shared below).

And lately, Google launched "Google Instant Previews" in its search results making this more a reality than only a trend.

Now, it won't be wrong to expect such functionality spreading into other websites/web apps.

Advantages for end-users

Better search accuracy

Once a user has made a search and seeing the result as not only links but with images, a better decision can be given on "if the result is related to the search or not".

Let's say, the user searched for "Ajax" (asynchronous JavaScript and XML), I'm pretty sure he won't prefer the link going to an article about the Ajax soccer team -if he's not a fan by chance- : ).

Prevent re-visiting same URLs

It is more likely to remember the look of a web page rather than the URL.

Users generally find themselves clicking on a URL that they had already visited. Previews can help preventing this.

Filter foreign and non-available websites

The link that is about to be clicked can have the information the user is searching for but it can be in a foreign language or the page may not be available.

For anyone who is clicking many links after a search, that can be a real time-saver.

Advantages for developers

Besides offering an option to users to find out where they are about to be forwarded, there are several advantages for developers:

Automated screenshots

If your web application is anything to do with the screenshots of websites, getting them automated would clearly be awesome.

It can be a CSS gallery, an ad network displaying images of websites, a directory, etc.

Flexible dimensions

As the previews are generated instantly, it should be possible to create them with any size preferred.

This is a great feature for a website whose design is changing regularly or if the same screenshot needs to be used in different layouts.

When to use them?

Like any other element to be used in web design, "functionality" is usually the right answer.

Instant thumbnails are definitely not for every website like a corporate one with few links or an e-commerce website who usually links to its sub-pages.

On the other hand, it perfectly fits into search pages, directories, social bookmarking or any other website with lots of links to external resources.

As usual, how Google does it is an example case: it is optional, so easy-to-use and helps reaching to the right point faster.

How to use them?

You have 2 options for that. Let's start from the easy one first.

Using Website Thumbnail Services

ShrinkTheWeb

ShrinkTheWeb is a very stable instant website previews provider that offers many options for customizing the screenshots like:

• real-time captures
• multiple sizes
• Flash embed or HTML
• API support
• optional permanent caching and more..

For basic usage, they have a free plan which can cover a high percentage of websites.

The service also offers plugins for popular applications like WordPress, vBulletin and more for faster integration.

SnapCasa

SnapCasa is another service which has free-to-paid plans with custom image sizes and slow-to-faster screenshot processing depending on the plan preferred.

websnapr

websnapr also has free and premium plans.

Different image sizes can be served and it is possible to remove "powered by" info according to the plan you're in.

Setup a website screenshot tool

If your website is not hosted on a shared account and you have the control of the server, than there are various tools that can capture website screenshots from command-line like:

• CutyCapt – for getting screenshots via WebKit browsers
• IECapt – a tool for website previews with IE
• SiteShoter – for getting screenshots via IE
• khtml2png – for capturing on Linux machines

However, keep in mind that setting up such a tool may require extra coding like getting the image created to the folder you prefer, etc. Simply, it can become complicated.

The success of a website is the result of various factors including the content, its frequency, functionality, design, social activity, marketing and more.

Once the website is at a certain level, the chicken-egg loop starts: popularity brings better search engine rankings, recognition in social networks and they end up in bringing more readers making the website more popular.

Although the priority should be focusing on the factors mentioned above, monitoring rankings regularly helps better understanding "how (and how fast) your content spreads" and "if search engines/social networks react enough to your efforts" to find out any possible issues.

Here are 8 free website ranking analyzers that display data from Alexa, Compete, Pagerank, and social networks like Delicious, Reddit, StumbleUpon, etc.

WooRank

WooRank is a full-featured website analyzer that not only diggs the rankings of Alexa, Delicious, backlinks, etc. but also checks other stuff like W3C validity, existance of sitemap + robots.txt file and more.

QuarkBase

The service shows traffic data, similar sites, social comments, social popularity and much more about websites.

It also categorizes website by type and lists fastest growing ones.

Read the rest of this entry »