That’s why this post exists, we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with other language like JavaScript, so get ready to be inspired.

Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below.

Animation

The HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is, controllable animation.

Audioburst Animation

A comfortable and fantastic animation created with HTML5’s canvas and audio tag.

Ball Pool

Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be.

Blob Sallad

A HTML5-spawned creature that would please you.

Bomomo

With Bomomo, you can observe different atomic movement simulated with HTML5.

Browser Ball

Get amazed with this ‘cross-browser’ HTML5 ball.

Bubbles

Have fun by create endless floating bubbles with different color.

Canvas Cartoon Animation

A simple and funny HTML5 cartoon that helps you to understand what HTML5’s canvas element can do.

Coolclock

A nice, customizable analog clock built by HTML5 and JavaScript.

Flickr PS3 Slideshow

View your Flickr’s photos with PS3 style slideshow in the web browser.

Interactive Polaroid

An interactive demo that works pretty similar to multi touch interface.

JS Fireworks

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.

Kaleidoscope

A very beatiful and futuristic HTML5 kaleidoscope.

Liquid Particles

Sensitive particle animation that reacts based upon your mouse movement.

Mesmerizer

Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.

Nebula Cloud

Get lost with this wondrous HTML5 nebula.

Parallax

View all 2D shapes in parallel perspective.

Particle Animation

An elegant HTML5 particle animation that can form into your preferred message.

Spread

Get lost with this endless spread animation.

Starfield

A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.

Video Destruction

One click to boom a playing video.

Waveform

Observe how HTML5’s canvas wave moves by altering its amplitude, wavelength, width, etc.

3D Effect

Impressed by canvas animation? That’s more HTML5’s canvas element can do, and it’s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game.

Canvas3D and Flickr

Have a whole new 3D experience with Flickr’s photostream.

Cloth Simulation

A realistic, HTML5-based cloth simulation.

Evolving Monster

Observe a monster evolving into a complicated creature, one of its creator is HTML5.

Google Giftbox

Giant search engine Google is presented in 3D, playable view.

JS Touch

A high quality and realistic ‘3D on 2D Canvas’ showcase.

Data Presentation

While HTML5’s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.

Gnuplot

Gnuplot, a data plotting application in HTML5 version.

RGraph

RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.

Web Application

Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application.

CanvasPaint

Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.

CanvasMol

A scientific application which is built to help you to understand certain earth element’s structure.

Cartoon Builder

Draw interesting cartoon image with this minimal and interactive cartoon builder.

Drag Anything Here

Drag anything you can drag in the demo to show details.

Gartic Sketch

An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.

PhysicSketch

Draw whatever you like and see how they react with simulated gravity.

Sketchpad

A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.

Smalltalk

A web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based ’social weather’ map, quite trivial (as stated by author) but interesting.

Game

3Bored

You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.

Breakout

Rebound the ball to break all bricks.

Canvascape

Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.

Catch It

How many balls can you dodge to get your winning HTML5 square?

Chain Reaction

Chain the explosion to achieve the goal, don’t get addicted.

Cubeout

Play Tetris in 3D, top-down view.

etchaPhysics

Draw item to move the ball to the star, don’t forget about the gravity.

Jigsaw Puzzle

Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.

Slide Puzzle

Slide to the victory, another HTML5 game that’s built to squeeze your mind juice.

Same Game

Remove certain group to get another group paired in same color and you would eventually be awarded a victory.

Tetris

One of the most classic game brought back to life by HTML5.

Torus

Yet another Tetris game in pseudo-3D version.

Conclusion

What is the limitation of HTML5? At this point we cannot decide, but with the impressive video below we can know how far the HTML5 has been pushed:

Yes, it’s Quake II in web browser, so now it’s very clear that with HTML5, more groundbreaking web application would be born to serve billions of internet users. It’s fast, it’s evolving, and it’s changing the world wide web. The question is, how would you use this game-changing HTML5?

We do like to hear your idea!

Source: hongkiat

By no means do I assume that everything in this article is etched in stone and error-free, but I think this will be a good starting point for this topic, and I will be happy to add to or amend any points that anyone feels need adjusting or clarification.

Consider this a starting point for discussing best practices for CSS3, especially since there don’t seem to be many articles available yet that exclusively discuss CSS3 best practices.

Think Progressive Enhancement

The most accessible and widely-supported websites are those created with progressive enhancement in mind. Standards proponents have for years discussed the benefits of accessible, backwards-compatible content – specifically in relation to JavaScript and Ajax-based websites and applications.

The same principles apply to CSS3 development. Website and app visuals that are critical to the user experience should not be dependent on CSS3. CSS3 should be used to enrich and enhance an already fully-functional experience.

Since CSS3 has now crossed into a gray area of event-driven features, more care needs to be taken to ensure that non-supporting browsers do not greatly hinder the user experience.

Organize and Comment Vendor-Specific Syntax

Unfortunately, since many CSS3 features are supported with different proprietary syntaxes, this means that some parts of your CSS code will become bloated. But you can still keep those areas of your code organized by inserting comments indicating the browser version that the code is for, and also by keeping the different lines of code in a recognizable order with the standard format listed last.

It’s also best practice to list your CSS3 items last in the CSS declaration. So, for example, if you’re rotating an item with CSS3, your code might look something like this:

#rotation {
	float: left;
	width: 200px;
	-webkit-transform: rotate(-5deg); // chrome, safari
	-moz-transform: rotate(-5deg); // firefox
	-o-transform: rotate(-5deg); // opera
	transform: rotate(-5deg);
}

In the example above, I don’t believe the standard syntax is supported by any browser, but this code just serves as a way to theoretically demonstrate the method of listing CSS3 properties last, and the standard property at the end of the declaration. Keeping the CSS3 properties last will also ensure that any “fallback” properties are in their correct place. Which brings us to the next point.

Use Fallbacks for Background-Related Enhancements

Some of the new CSS3 features require that the background property be used. The background property is nothing new to CSS, but the possible values have been upgraded with CSS3, allowing use of RGBA, HSLA, gradients and even multiple background images.

In most cases, a non-supporting browser will still display a similar feature, and the lack of an HSLA or RGBA color will not affect the result. But with a gradient, you may need to declare an IE-only fallback in a separate stylesheet, or a background color that it will fall back to if a gradient is not supported.

So, you might need something like this:

#element {
	background-image: url(images/bg-transparent.png);
	background-color: rgba(98, 135, 167, .5);
}

In the case of multiple backgrounds, be sure to list the most important element first, so it serves as the fallback.

For most situations, I don’t think this particular practice will be necessary, but it’s good to keep in mind the possibility that a fallback color or background image may be needed.

Use Rotations, Animations & Scaling Sparingly

Although WebKit-based browsers have opened up some incredible possibilities with CSS3, we don’t want to get carried away. Subtle, tastefully selected events and animations are usually the best choice.

There’s a reason that Flash intro pages became a tiresome practice; they were often self-indulgent and pretty pointless, doing nothing but slowing down the user and making them download more resources than necessary.

To prevent the web from becoming filled with CSS3 trash, let’s use the new features carefully and in a dignified manner that doesn’t harm or slow down the user experience.

Be Careful With Typography

Making enhancements on text with CSS3 has become more common, and many sites are now employing the @font-face technique to use custom fonts.

Make sure that any typography-related enhancements do not affect the readability of the site. Sometimes, as designers, we take an overall view of a website’s layout, and try to make every little detail as beautiful as possible, but forget the most important thing: That the content should be accessible and readable.

So, if you’re considering using shadows, gradients, or transforms on typographical elements, think twice about it, and strip out any unnecessary enhancements that cause undue harm to the readability or accessibility of the site.

Test in All Browsers With Fallbacks Enabled

Testing of course is one of the most important parts of successfully adding enhancements. But the advent of CSS3 features may add more pressure in this area.

Don’t be content to just test the enhancements at full-throttle in the most supportive browsers; test in the non-supporting browsers while temporarily removing some of the enhancements, maybe one by one, to see the experience with fallback options enabled.

This makes commenting and organizing code even more important, and will likely add more quality assurance testing to many design teams’ schedules.

What Did I Miss?

Surely this is not a complete list. Add your comments below if you feel there are important CSS3 enhancements that require a best practice method or technique, and I’ll be happy to add to a few end-points to this article to round it out.

Source: impressivewebs

The list is not specific to any particular type of development position, but I tried to balance it between both the design/html/usability side of things and the back-end/database/programming side. I’m just focusing on web development related questions – you should obviously ask the usual barrage of questions like “Why do you want to work for [some company?]” I’m not covering those types here. Also, this list isn’t in any particular order.

1. What industry sites and blogs do you read regularly?

   This question can give you an idea of how in-tune they are with the latest industry trends and technologies, as well as how passionate they are about webdev. It’ll help separate the people who do it as a career AS WELL as a hobby from those who might simply be in it for the big developer paychecks.

2. Do you prefer to work alone or on a team?

   This is an important question to ask depending on the work environment. If your project is going to require close interaction with other developers it’s very handy to have someone who has had that kind of experience. On the other hand, many developers thrive while going solo.  Try to find a developer that fits your needs.

3. How comfortable are you with writing HTML entirely by hand? (+exercise)

   Although their resume may state that they’re an HTML expert, often times many developers can’t actually write an HTML document from top to bottom.  They rely on an external publisher or have to constantly flip back to a reference manual.  Any developer worth a damn should at least be able to write a simple HTML document without relying on external resources. A possible exercise is to draw up a fake website and ask them to write the HTML for it. Keep it simple and just make sure they have the basics down – watch for mistakes like forgetting the <head> </head> tags or serious misuse of certain elements.  If they write something like: <image src="/some/image.gif">, it might be a good hint to wrap things up and call the next interviewee.

4. What is the w3c?

   Standards compliance in web development is where everything is (hopefully?) going. Don’t ask them to recite the w3c’s mission statement or anything, but they should at least have a general idea of who they are.

5. Can you write table-less XHTML?  Do you validate your code?

   Weed out the old-school table-driven design junkies! Find a developer who uses HTML elements for what they were actually intended. Also, many developers will say they can go table-less, but when actually building sites they still use tables out of habit and/or convenience. Possibly draw up a quick navigation menu or article and have them write the markup for it. To be tricky, you could draw up tabular data - give them bonus points if they point out that a table should be used in that scenario

6. What are a few of your favorite development tools and why?

   If they say notepad you’ve obviously got the wrong person for the job. Not only can this help you gauge their level of competence, but it’ll also see if they match the tools everyone else uses in-house.

7. Describe/demonstrate your level of competence in a *nix shell environment

   See how well they work without their precious GUI. Ask some basic questions like how they would recursively copy a directory from one place to another, or how you’d make a file only readable by the owner. Find out what OSs they have experience with.

8. What skills and technologies are you the most interested in improving upon or learning?

   Find out if their future interests match the direction of the position (or the company in general).

9. Show me your portfolio!

   A portfolio can say a lot about a developer. Do they have an eye for aesthetics? Are they more creatively or logically oriented? The most important thing is to look for is solid, extensive, COMPLETED projects. A half dozen mockups and/or hacked-out scripts is a sign of inexperience or incompetence.

10. What sized websites have you worked on in the past?

    Find a developer that has experience similar in size to the project you’re putting together. Developers with high traffic, large scale site expertise may offer skills that smaller-sized developers don’t, such as fine tuning apache or optimizing heavily hit SQL queries. On the other hand, developers who typically build smaller sites may have an eye for things that large scale developers don’t, such as offering a greater level of visual creativity.

11. Show me your code!

    Whether it’s plain old HTML or freakishly advanced ruby on rails, ask for code samples.   Source code can say more about a persons work habits than you think. Clean, elegant code can often be indicative of a methodical, capable developer. A resume may say 7+ years of perl experience, but that could mean 7 years of bad, unreadable perl. Also, make sure you ask for a lot of source code, not just a few isolated functions or pieces of HTML. Anyone can clean up 20-30 lines of code for an interview, you want to see the whole shebang. Don’t ask for a full, functional app, but make sure it’s enough that you can tell it’s really what their code is like.

12. What are a few sites you admire and why? (from a webdev perspective)

    Find out what inspires them. While it doesn’t necessarily “take one to know one,” a great developer should always have a few impressive favorites.

13. Fix this code, please.

    Give them some broken code written in the development language they are expected to know for the position. Have them go through it line by line and point out all the mistakes.

14. I just pulled up the website you built and the browser is displaying a blank page.  Walk me through the steps you’d take to troubleshoot the problem.

    This is a great question to determine how well rounded their abilites are. It tests everything from basic support skills all the way up to troubleshooting the webserver itself.

15. What’s your favorite development language and why?  What other features (if any) do you wish you could add to this language?

    Asking about feature additions is a particularly valuable question – it can reveal if they’re skilled in programming in general or if their skillset is pigeonholed into their language of choice.

16. Do you find any particular languages or technologies intimidating?

    I’ve often felt that the more I learn, the less I feel like I know. Solving one mystery opens up ten others. Having the interviewee tell you their faults can reveal a lot about what they know.

17. Acronym time (oh boy!)

    Some might argue that knowing what acronyms actually stand for is trivial, but there are certain acronyms that a developer should have hard-wired into their head ( HTML or CSS, for example). This is the kind of question that might be better reserved for the phone interview to weed out those who are very unqualified.

18. What web browser do you use?

    There is a right answer to this question: all of them. A competent developer should be familiar with testing cross-browser compatibility by using all the major web browsers.  Obviously they’ll have a primary browser they use for surfing, but their answer to this question might be a good way for you to segue to asking how extensively they test cross-browser issues. Also, if it’s some kind of css/html position seeing what toolbars they have installed can be a good metric of their skillset (I personally find the web developer toolbar for firefox to be invaluable)

19. Rank your interest in these development tasks from 1 to 5 (1 being not interested at all, 5 being extremely interested)

    Write up a list of tasks the job requires. Having them rank these items according to their interest level can help you find who is the best suited for the position.  I know debugging uncommented perl code from 1997 sounds seriously awesome to me.

20. What are a few personal web projects you’ve got going on?

    Almost all developers have personal web projects they like to plug away at in their spare time. This is another question that can help differentiate the passionate developers from the clock-punchers. It’s also a good question to end an interview with, as it’s usually easy (and fun) for them to answer.

21. What do you know about CSS3 and HTML5?

    You can judge how up-to-date this person is one web trends.

22. What side of the Adobe -vs- Apple war are you on?

    A fun question with no clear answer, since both sides can be argued. While this is a “fluff” question the interviewee should know about Apple’s iTouch, iPhone and iPads not supporting flash. Why Apple’s not support flash on those products and ways around it.

Sources: seomoz, Dey Alexander, Tech Interviews

Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer!

1. CSS3 Selectors Test

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.

2. CSS3 Please!

CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

3. CSS3 Generator

Allows you to create and costumize multiple CSS3 effects.

4. CSS3 Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

5. CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

6. Border Radius

Allows you to create rounded edge rectangles.

7. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

8. CSS3 Generator

This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.

9. CSS3 Previews

Many new CSS3 feature previews and demos.

10. CSS Template Layout Module

Learn about popular CSS3 modules and opportunities CSS3 offers.

11. 5 Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

12. Web Browser CSS Support

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

13. Font Drag

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.

14. CSS3 Cheat Sheet

Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

15. Sizzle

A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

16. Web Designers’ Browser Support Checklist

Displays web browser support on HTML5 and CSS3.

17. CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

18. HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Woork. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

19. HTML5 Demos And Previews

You can watch HTML5 demos, new features and check out browser support.

20. The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

21. HTML5 Cheat Sheet

HTML5 features and useful info at one place.

22. HTML5 Gallery

A showcase of sites using HTML5 markup

Source: 1stwebdesigner

Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost endless list of closing </div> tags. In fact, many beginners think they just have to use divs instead of tables to produce quality code. Divs are cleaners than tables, but without proper code organization, it can be as (or even sometimes more) messy as table based code.

Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment every div tag you’re closing, as shown in the example below:

<div id="header">
  <div id="sub" class="first left">
    ...
  </div><!-- #sub.first.left -->
</div>
<p>
  <!-- #header -->

Use a CSS reset

Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might already know how useful a CSS reset it. Because by default, browsers don’t apply the same default styling to HTML elements, a CSS reset will ensure that all element have no particular style so you can define your own without the risk of many cross-browser rendering issues.

Source: http://meyerweb.com/eric/tools/css/reset/index.html

Don’t use @import

CSS files can be included using the @import directive. This can be useful when, for example, you want to include a stylesheet into another. Another common practice is to include CSS file in html documents using the following:

<style type="text/css>
  @import url('a.css');
  @import url('b.css');
</style>

While it works, the @import directive is much slower than the other way to include stylesheets into a html document:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

It will not make a difference on low traffic websites, but if you have the chance to own a popular website, don’t waste your visitor’s time using @import.
Source: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

“Smush” your images

Being a developer, I always found that optimizing my images for the web wasn’t easy. I tried the good old “Save for web” Photoshop command, but most of the time, I ended up with images that were either too big or without a sufficient quality.
As a result, I had the bad habit of using unoptimized images on my websites. This isn’t a problem when you don’t have to care about your site’s bandwidth, but after my recent switch on my vps.net virtual private server, I had to be careful with image sizes.

At this time, I found a very cool tool named Smush It: You enter your unoptimized image url, and Smush It will create a perfectly optimized image for you. You can save up to 70% of the file size, while keeping the original quality.

Don’t mix CSS with HTML

As a markup language, the right use of HTML is to organize documents by defining a header, a footer, lists, blockquotes, etc. Some time ago, front-end web developers often used now deprecated HTML attributes to style a particular element.

Nowadays, the style attribute allows developers to insert CSS directly into a html document. This is very useful for testing or when you’re in a hurry. But the style attribute is bad practice, that goes completely against the CSS philosophy.

The following example illustrates how dirty and hard to read a simple line of code can become, with the style attribute:

<a href="http://www.610design.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">610 Design</a>

Don’t mix Javascript with HTML

Just like mixing your html code with css is bad practice, you shouldn’t use any Javascript in your html documents. The following bad practice illustrates an onclick event:

<a id="cwc" href="http://www.610design.com" onclick="alert('I love this site!');">610 design</a>

The same result can be achieved using unobstructed Javascript. In this example, I’m using the popular jQuery framework:

$(document).ready(function() {
  $('#cwc').click(function() {
    alert('I love this website');
  });
});

This may seems a bit harder at first, especially for beginners; but it is definitely not, and it will keep your html document clean.

Use conditional comments

You know it, IE sucks, and some clients suck even more by requiring you to create webpages which are compatible with this obsolete browser. To target specific versions of IE, you can use the well known IE hacks, as shown below:

height: 200px; /* normal browsers */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*height: 350px; /* All IEs */

Those hacks are extremely useful sometimes, but they are not the best way to target a specific version of IE, and it will cause your CSS validation to fail.

Instead, you should use the conditional comment shown below to target IE6.

<link href="style.css" rel="stylesheet" type="text/css" />

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

Place Javascript file at the bottom

A popular practice of the late 90′s/early 2000′s was to place Javascript files within the <head> and </head> tags. The problem is that your javascript files will be loaded first, and consequently your content will be loaded after.

By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded only when the content has been properly displayed.

    ...
    <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
  </body>
</html>

Use HTML semantically

HTML is not a programming language. It is a markup language, used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, and more.

If you started to create websites in the good old 90′s or in the beginning of the century, you know how dirty the markup was at the time. But happilly, it has evolved.
Among other things, it is important to use html element semantically. As an example, a navigation menu should always be an unordered list:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Blog</a></li>
  </ul>
  

Test WHILE you build to avoid cross-browser issues

One of the biggest mistake I ever made when developing html, CSS, and javascript, was not to test my pages on multiple browser while I was writing them. Instead, I used to write all my code and just view in Firefox to see how it was rendered.

In theory, this should be good. But as you know, cross-browser issues are a major problem for front-end developers, especially due to IE. If you test your documents on Firefox/IE/Chrome while your writing it, cross-browser rendering problems will be much easier to fix. I have lost hours not doing it, so I hope this final tip will help you saving your precious time. To test on multiple versions of IE, I use this very handy tool.

Source: Cats who code

1. jQuery tutorials

This is a page that lists a comprehensive list of quality tutorials in several languages, I’ve been learning a lot from there.

2. jQuery docs

Not for beginners, but this section will let you browse references and find most of the informations that you could need.

Blogs and websites

Like for other popular frameworks, jQuery gets some websites dedicated to it. The following websites are great resources for anyone wanting to learn jQuery.

3. Learning jQuery

Multi-author weblog providing jQuery tutorials, demos, and announcements. There is tutorials for all skill levels.

4. jQuery for Designers

One of my favorite jQuery related resources for visual effects.

5. Learn jQuery Now

Lots of great tips and tutorials for the jQuery learner.

6. jQuery for absolute beginners video series

If you are starting from scratch, these videos will explain you in details how to do some things with jQuery.

7. jQuery How-To

A tutorial blog for jQuery, good to follow for great advice.

8. Visual jQuery

Not exactly a place to learn jQuery, but I understood a lot about the framework by getting a visual overview of the functions.

Books about jQuery

Some people learn better from books, the best advantage of working with it is that you’ll get a better overview and deeper understanding of the topic.

9. jQuery in Action

This book introduces you to the jQuery programming model and guides you through the major features and techniques you’ll need to be productive immediately.

10. jQuery: Visual QuickStart Guide

This book will teach readers how to make the most of jQuery using the task-based, step-by-step, visual format.

11. jQuery Cookbook

Learn how to add components from the jQuery library to your websites and web applications, with detailed recipes for tasks ranging from basic integration to complex user interface development.

Source: Designer Daily

You’re starting your own design business.

Running your own design business is part awesome, part OHGODWHATHAVEIDONE. You’ll find tons of How to articles online, dealing with how to be a successful designer slash businessman. But where can you find an article on how to fail at your design business? Right here, readers. Read on for step 1.

Suck at design

Step one to failing at running your own design business is to be terrible at design. Use Comic Sans. Have a cute mouse follow the cursor on websites you build. Why use a subtle gradient when you can use a yellow-to-purple gradient, plus embossing, drop shadows and letterpress technique? Be careful though; you can learn to NOT suck if you listen to your peers and seek out constructive criticism on your designs. Avoid this at all costs.

Lesson: be good at what you do, and seek feedback to keep getting better.

Do everything yourself

If you want to fail at your design business, then you should do everything yourself. I’m talking about developing a marketing plan; doing all the accounting; sales; project management; web design; print design; content-management-implementation; identity design and more. Yup – if you do everything yourself, not only will you fail spectacularly – you will probably be bald and malnourished by the time you get to the point of fail.

Lesson: learn to let go. Hire or subcontract to people you trust, and give them the power to make decisions.

Deadlines are for losers

You know what sucks? Conan O’Brien getting the boot from the Tonight Show. You know what else sucks? Deadlines.

Deadlines totally hinder the creative process by making you work efficiently and in a focused manner. Plus, deadlines mean that you actually have to get your work to your client at a pre-determined date so the project can move forward. Such rigid structure in a creative field? No thanks. Plus, your clients actually don’t want you to hit their deadlines. By missing their deadlines, you’re essentially saying to them “You can’t hold me down. I’m a creative REBEL – like a deadly combo of James Dean and David Carson”. Clients find this sexy and will totally call you the next time a project comes up.

Lesson: learn to work with, respect, and hit both yours and your clients’ deadlines.

Treat design like art, not business

The phrase “design business” is sort of an oxymoron, because design is art, like everyone knows. It’s sort of like saying “check out my wicked angel tattoo” – we all know angels aren’t wicked except in that new Legion movie (which totally looks great and definitely not like the worst movie of all time).

I digress. Make sure your clients know that design is art, and if they don’t like your proposed design concepts, it’s because “they just don’t get your art”. As well, a surefire way to effectively gain new clients is to speak YOUR language (art) and not theirs (business). For example, if you’re trying to land a new web design job, be sure to talk about very specific art principles and theories in order to impress them. Avoid, at all costs, talking about how the website you can build for them will increase sales/their bottom line/conversions/anything  measurable. Your clients are business people, and business people hate measurable results.

Lesson: if you’re starting a design business, recognize it is a business and treat it like such. Learn the language and best practices of business and combine that with your creative skills to be successful.

Remove ‘No’ from your vocabulary

If you want to your design business to fail, always say “Yes”. No matter what the deadline is; no matter what the budget is; no matter what else you have on your plate – always say yes. This will ensure failure just like signing Michael Bay on to direct your film will ensure lots of explosions (and deep, thought-provoking dialogue).

The problem with saying “No” is that you end up being selective with your clients and taking on projects that suit your style and goals. Since we’re talking about failure here, we need to say “Yes” to everything – that $50 logo design job that needs to be done tomorrow, that $200 web design job proposed by that guy whose belt is made up of the bones of past designers – everything. So make a rule and hang it in Comic Sans above your workstation: “No is not in our vocabulary”.

Lesson: sometimes it’s tough, but you have to learn to be able to say no in order to succeed. Not every job is ideal, and not every client is a great match. Learn to see the good ones in advance, and know your limits.

These are only a few way to fail at your design business – there are many more. What are your favorite ways to fail?

Source: inspiredm

What is this?!

this is the current object. People that are used to object oriented languages use objects constantly, and this is how you access your object in JavaScript. This differs from Java and C++. This is best demonstrated by example, so let’s take a look.

class HotDog {

public:
     string getCondiments();
private:
     string condiments;
}

string HotDog::getCondiments() {

    return condiments; // The compiler knows to find "condiments" in the current HotDog instance
}

Ruby and Python don’t work this way. Instead, you must say "look for this variable in the current instance";

class HotDog:
    condiments
    def getCondiments(self):
         return self.condiments # "self" is a reference to the
         current instance of HotDog.

  class HotDog
         @condiments
         def getCondiments
              return @condiments # @condiments is an instance
              variable of an instance of HotDog

         end
    end

JavaScript has more in common with Ruby and Python than with Java and C++. The same thing in JavaScript is:

function HotDog() {
    this.condiments = "mustard, ketchup";
    this.getCondiments = function() {

         return this.condiments; //this is expected to be a reference to the current instance
    }
}

That’s what this is expected to be, anyway. It’s expected to be a reference to the current instance of whatever object it’s defined within.

this Gets Tricky

However, let’s say we wanted to find out what condiments were on our hotdog in 30 seconds. Assuming the HotDog class from above, that code might look like this:

var myHotDog = new HotDog();

// Call the getCondiments function in 3 seconds
setTimeout(myHotDog.getCondiments, 3000);

Many JavaScript beginners are surprised to learn that this code won’t work. It’ll give an error saying that this doesn’t have a member called condiments, even though it clearly does. What happened?!

As it turns out, this in the getCondiments function is set to the global object, window. This is because there is no binding of functions to instances in JavaScript. Whenever the instance isn’t explicitly stated, then this becomes window (at least in the browser). Writing this as myHotDog.getCondiments() indicates that you want this to be myHotDog, so it works correctly. The setTimeout function, however, just has a reference to that function. When it calls it, it’s not aware of myHotDog, so JavaScript sets this to window

"Fixing"; this

There are several ways of forcing this to be what you want, and many of them touch on some of the more interesting features available in JavaScript. The first is apply. apply is a member of every function. It says "call this function with this object as this and these arguments. An example might help.

// These two are equivalent
myHotDog.getCondiments();
myHotDog.getCondiments.apply(myHotDog);

// You could also do this
var yourHotDog = new HotDog();
myHotDog.getCondiments.apply(yourHotDog);

// The above line does the same thing as:
yourHotDog.getCondiments();

// The above two calls will return the condiments off of your hot dog, not mine.

That doesn’t solve our setTimeout problem, however. apply actually calls the function, and we just want a reference to the function that uses the correct this. Luckily this is easily done, but let’s talk about some background first.

Lexical Scoping

In many languages (all the good ones, if you ask me), lexical scoping is supported. Lexical scoping basically allows you to access local variables in a parent function. If a function is defined within another function, it can access its own local variables as well as those of the function it was defined within. Time for another example.

function drinkBeer() {
    var beer = "Big Daddy IPA";
    function pour() {

         var glass = "Pint Glass";
         return "Poured " + beer + " into a " + glass;
   }

   function drink() {
         beer = null;
         return "Beer is all gone";
   }

   pour();
   drink();
}
drinkBeer();

This works just fine. drinkBeer cannot access glass, but pour and drink can access beer.

Lexical scoping is extremely powerful. If this small example doesn’t explain it, I encourage you to look around other examples on the internet until it’s more clear. While writing JavaScript, look out for ways this can make your life easier. Once you’re looking, they’re all over the place.

Solving our setTimeout Problem

With lexical scoping, we can easily solve our setTimeout problem.

var myHotDog = new HotDog();
setTimeout(function() {
    myHotDog.getCondiments();
}, 3000);

See what we did there? We created a new function that we passed to setTimeout. Our new function can access myHotDog, so it just applies it to the getCondiments function. Pretty slick.

Defending against this abuse

As somebody writing the HotDog class, it might be upsetting to you that people constantly need to keep this in mind when accessing your class. It would be nicer if there was a way to make your class work all the time. Fortunately, there is!

function HotDog() {
    var my = this; // my references the current this, which is correct.
    my.condiments = "mustard, ketchup";
    my.getCondiments = function() {
         return my.condiments; //my is guaranteed to be a reference to the original "this"
    }
}

HotDog is a constructor. You instantiate a new instance of HotDog by writing "new HotDog()". In constructors, this is always your instance. So we created a new variable, my, that references the HotDog instance. This allows you to always refer to the HotDog instance, no matter how the getCondiments function is called.

Bind

Another method of "fixing"; this is adding a bind attribute to every function. This allows you to pass in an object that will be your this. Many JavaScript libraries, such as Prototype, do this.

var boundFunction = myHotDog.getCondiments.bind(myHotDog);

Now boundFunction will always call getCondiments with this set to myHotDog. If you’ve been paying attention, it should be fairly obvious how bind is written.

function bind(thisObject) {
    var my = this; // this is the function here
    return function() {
        my.apply(thisObject);
    }
}

Whew

That’s pretty much all you need to know about this.

• this will be window whenever your function is indirectly called.
• Use apply to force this to be what you want
• You can use lexical scoping to make sure this behaves in a predictable manner

I hope that’s clear, comment if it’s not!

Source: Caffeinated Simpleton