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 »

English might be the mother tongue of the internet but the times, as Bob Dylan once noted, they are a-changin'.

According to Internet World Stats, China alone had more than 384 million internet users as of December 2009 (more than the combined populations of the UK and USA), while web access continues to increase in other large markets such as South America.

The web quite literally puts the world at your fingertips, but there are few tips and tricks to consider when it comes to making your website both accessible and appealing to visitors who speak a language other than English.

Make sure you're understood

Good quality translation is so important when it comes to making your website accessible. The simplest and cheapest way is to add a translation widget such as Google Translate, however, machine translation can throw up contextual and structural errors.

Try pasting a block of text into a translation program, translate it to Spanish, then Arabic and then back to English. It's likely that the original text will be changed dramatically as if in some online game of 'Chinese whispers'. If you are using machine translation, keep the source or original content as simple and clear as possible, avoiding any jokes or specific cultural references.

If resources allow, you should prefer human translation by a native speaker of your new target market. This should help avoiding any errors or cultural faux pas as well as allowing for a more natural flow and tone.

If the budget isn't enough for translation services, it may be handy to double-check any machine translation with the help of a native speaker.

Use of CSS and UTF-8

If you're using any custom fonts (@font-face), make sure that the font supports any special characters that the language may have.

UTF-8 is a variable-length character encoding that is compatible with over 90 written languages. You might not see the need for a localized site written in Arabic or simplified Chinese at the moment, but using UTF-8 from the start will ease adding a new language if required in the future.

Read the rest of this entry »

Win Without Pitching, a business development consulting firm for ad agencies and design firms, is sharing a manifesto of business practices for creative firms.

It is called "The Win Without Pitching Manifesto" and can be read online for free or purchased as a hardcover or an eBook.

The manifesto suggests placing a strong position against the "so demanding customers" and the practices that usually end up in creative artists creating for free.

It is so fluent, motivating (in most cases) and fun to read. There are 12 chapters from "We Will Specialize" to "We Will Not Solve Problems Before We Are Paid" which can help shaping the business.

If you're not experienced in JavaScript, hearing jQuery is great but thinking it can be something difficult or want to improve your jQuery skills, you might love this.

jQuery Fundamentals is a free online book (there are PDF and ePub versions too) that can be a guide for any developer but specially for JS and jQuery beginners.

It starts from JavaScript basics, moves to jQuery basics and, if you want, there is a detailed chapter on advanced jQuery usage.

All with examples, exercises and their solutions (comes with the download).

Simply, a must-bookmark for every web designer and developer.

It has been ~15 years that I've been into web design where the first 5 was totally amateur, 7 years were for creating client projects and the last 3 is focused on personal ones.

When looking back, I'm thankful to many stuff that helped me improve my skills on web design/development. And, there are some important ones that makes me say "I wish I had..".

This article is mostly focused on the "I wish" part hoping it may help anyone who is new to web design.

They are not the absolute truths, in fact, they may be wrong. They are simply my thoughts based on what I experienced. You decide if they'll fit you or not.

So, starting now. If I had started web design today, I would (share yours in the comments):

Start With PHP

When I started web development, the stability of open source was still a question mark and developers were discussing whether ASP or PHP was more powerful.

As a user of Windows, having Ms Access already installed in my PC and no idea what MySQL was, I started with ASP. Bang!.. wrong move.

ASP is not developed further after 2000 however PHP is improved so much and so is its community, tutorials, etc. Today, it is clearly the most popular scripting language.

There are also many other great languages like Python, Perl, ASP.NET, Ruby, etc. However, learning the most popular one at first is the easiest, most functional and you can better decide which other language you want to learn after that.

Learn JavaScript Very Well

JavaScript was always popular but never as this much. And every new day makes it more popular and required.

It was mostly used for form validations, displaying alerts or pop-ups and knowing few things about it was enough.

Today, it is hard to think of a non-Ajaxed web application, we can pull tweets, Flickr images, draw images, implement animations and much more.

Also, it is the best cure for the biggest headache: browser incompatibilities. And, the HTML5 world will push it more.

Read the rest of this entry »

Today, mostly, we all write, edit and/or create content for web. Whether it is a blog, a web project or the stuff we share in social networks.

As the variables and consumers of web are pretty different than the print, Yahoo has created a guide named Yahoo! Style Guide that shares valuable articles and tips.

There is actually a book behind this online resource where many of the chapters are shared online within categories like writing, editing, words and more.

To give a better idea about what the guide offers, here are some of the content provided:

• Get to the point
  
• Eye-tracking: Where do readers look first?
  
• File names, types, and extensions
  
• SEO Basic