Trying to disable MySQL strict mode

Security token failure & not found error

Community links: Open source motivations edition

What’s more fun to do over the weekend then catch up on WordPress community links? Set up the Christmas tree? Clean out the gutters? Shovel the driveway?

Alright, if you have to. Chores are chores. But when you’re done, reward yourself with a hot coffee and a good dose of WordPress reading. We have a truckload of links for you, so settle in.

The full list of links is after the jump.

In blog posts this week:

• Alex King, a well known WordPress plugin developer and entrepreneur, posted his thoughts on what motivations exist for WordPress plugin developers today. Chris Olbekson followed up with his own thoughts, as did Joost de Valk. Jeff Chandler started up a commentary at WBTC as well.
• WooThemes posted a preview of the upcoming launch of WPBundle. They also shared a few thoughts on the increase in support time that’s required of them with so many themes released.
• Dev4Press redesigned their site.
• James Dalman at WP Design Coach is now accepting themes for review on his new blog.
• Jeff Chandler wrote up how anyone can contribute to the WordPress.org theme review process. He also started a discussion around the legacy that plugins leave behind when they are deactivated.
• ThemesForge has decided to post 24 theme tips throughout December. I love the attitude and initiative behind the posts so far.
• WP Plugins has an interview with plugin developer Jonathan O’Shea.
• Matt Mullenweg was on The Big Web Show with Jeffrey Zeldman.
• Dre on the Sucuri blog wrote up yet another WordPress security post. These posts are always good reminders to secure your WordPress site. While we’re on the topic, WPZine has a collection of WordPress security plugins this week too.
• Brandon Cox wrote a really interesting post on how one particular WordPress theme ad depicted developers.
• 9seeds’ plugin WP Event Ticketing seems to have a few issues with the popular WordPress theme Thesis. They’ve posted a fix that should take care of the problem, though.

There were a few WordPress resources posted fresh this week too:

• DBS>Interactive created and released the Template Tag Reference Guide this week.
• Sarah Gooding at WPMU.org listed myself and WPCandy in their list of 50 people to follow for WordPress news on Twitter. Thanks Sarah! They also put up a collection of plugins to use with Foursquare.
• Paul Andrew posted a collection of plugins for integrating Flickr into a WordPress blog.
• Jean-Baptiste Jung posted a solid roundup of WordPress code snippets.
• iThemes has released the video tutorials in their Builder Basics series for free online.

Finally, in WordPress tutorials this week:

• WPEngineer has been laying into the tutorials this week, with a custom login page tutorial and a walkthrough of the upcoming post formats feature.
• WPBeginner has a new tutorial up showing how to add the official LinkedIn share button to your WordPress blog. They also have a nice roundup of plugins for managing images with WordPress.
• Vladimir Prelovac posted about how to disable post revisions and delete them from your database.
• Scribu showed how to insert a banner between posts, without editing the theme files.
• Chris Coyier put together a tutorial showing how to make the WYSIWYG editor really WYSIWYG.
• Sumeet Chawla at Nettuts+ put together a tutorial showing how to create an FAQ page with custom post types.

Wow, that may be a record for number of WordPress related links in a roundup post (for us). Who gets the plaque?

That’s it for links this week. If you run across something link worthy, don’t hesitate to let us know about it. If it’s worth a story we’ll jump on it, and if it’s best suited for a community news post it will show up in this space next week.

Take the WordPress Users Survey, win over $3,000 in prizes

Today we’re happy to announce the 2010 WPCandy WordPress Users Survey, as well as a WordPress giveaway valued at over $3,000.

WordPress is used every day by bloggers and professionals all over the world—but how and what for? Just who is using WordPress? This survey aims to compile survey data on these sorts of questions into a report for the benefit of the community.

By participating in this quick WordPress Users Survey, you will get three things:

• Access to the final survey report in January. Just make sure you include your email with the survey. It will only be used for the one-time email delivering you the survey report.
• Entered to win a $3,000 grand prize. More on this below.
• The satisfaction of contributing to a community-driven endeavor that will benefit everyone. Also know as the feel-goods.

The survey will be available through December, and the final report will be created in January. Take the 2010 WPCandy WordPress Users Survey today!

Take the survey for a chance at over $3,000 in WordPress prizes

Such a project just wouldn’t be as much fun without a massive giveaway, right? That’s what we thought.

We’re very thankful to have so many supportive sponsors who have generously donated items for this giveaway. But let’s get right to it; the giveaway items are (in no particular order):

• 1 copy of Headway, from Headway Themes
• 1 copy of Startbox and 1 child theme (winner’s choice), from WPStartbox.com
• 1 copy of Builder, from iThemes
• 1 copy of BackupBuddy, from PluginBuddy
• 1 year membership at WebDesign.com
• 1 year Developer Subscription at WooThemes
• 1 standard license of Standard Theme
• 1 standard license of Live Theme
• 5 themes (winner’s choice) from Themify
• 1 copy of Relay, new from Press75
• 1 copy of Enterprise, from StudioPress
• 1 copy of Traction, from The Theme Foundry
• 3 themes (winner’s choice) from Gabfire
• 1 copy of Elemental, from Pro Theme Design
• 1 year membership at Themeopoly
• 1 Lifetime Theme Developer Membership at Dev4Press
• 1 Lifetime Plugin Bundle Development Membership at Dev4Press
• 1 year membership at FlexiThemes
• 3 themes (winner’s choice) at Gorilla Themes
• 1 theme (winner’s choice) at ThemeJam
• 1 copy of Gravity Forms

Yes, one winner will be chosen from the survey participants to win the list of prizes you just read.

Will it be you?

Other ways to enter

You can also be entered to win up to two more times (in addition to taking the survey). To be entered again, you can:

• Tweet about the survey using the #wpcandy hashtag.
• Blog about it, linking back to this post or the survey itself.

We’re very excited about this survey, and think it can provide some valuable insight into how WordPress is used all over the world. The more we can spread the word, the better!

Take the 2010 WPCandy WordPress Users Survey today!

Competition Rules: UK iPads From £200, 15GB Per Month

Over in the UK, something is happening that will bring cheer to the miserable, heavily-drinking denizens of that gray, cold land: Competition. To be precise, competition in iPad plans.

3G operator “3″ has entered the iPad subsidy game, going squarely up against Orange, which announced its own plans earlier this week. The prices for the iPad itself are the same as Orange is asking – £200, £250 and £350 for the 16, 32 and 64GB models. The difference is in the data plans. 3 offers a massive 15GB per month, or around 500MB per day. To get these prices, you’ll need to sign a two-year contract.

When I’m not trapped in my elevator-free apartment by a broken leg, my iPad is in constant use on my own 3G data plan. Even then, I have never come close to hitting the 2GB cap. So unless you watch a lot of streamed video, 15GB may as well be unlimited.

This is what happens when you have a lot of equally good operators all chasing the same customers. In the US, a Verizon iPhone can’t come fast enough.

iPad Plans on 3 [3 via Pocket Lint]

New Flash Player 10.2 Goes Easy on the CPU

[Updated, see below] Adobe has released the first beta of Flash Player 10.2, an update that focuses primarily on speed and performance improvements. New in Flash 10.2 is something Adobe calls “Stage Video hardware acceleration,” which the company claims will “decrease processor usage and enable higher frame rates, reduced memory usage, and greater pixel fidelity and quality.” And the hardware acceleration technology does do all of these things, though your mileage will vary depending on what kind of hardware and software you’re using.

To try out the new Flash Player 10.2 beta, head over the Adobe download page. Be aware that, while 10.2 appears to be relatively stable, it is a beta release and there may be bugs.

The Stage Video hardware acceleration means that Flash Player 10.2 can leverage your graphics card for not just H.264 hardware decoding (which works in Flash Player 10.1) but also color conversion, scaling, and blitting.

Adobe’s press release makes a rather bold claim: “using Stage Video, we’ve seen laptops play smooth 1080p HD video with just over 0% CPU usage.”

Sadly, we have not seen such results. While we won’t argue with the smoothness of the playback in this new release, Flash is still going to use quite a bit of your PC’s CPU. Based on my testing (done on a Macbook Pro laptop using both Firefox 4b7 and Safari 5, and a Mac Pro tower using the same browsers — Wired is an all-Mac office), while CPU usage is down in Flash 10.2, it’s still a long way from zero.

Update: Since this article was published, we’ve been hearing from you, our awesome readers, in the comments and over e-mail. Some things to note: The new beta performs much better on Windows computers than it does under Mac OS X. Also, full hardware acceleration on Mac OS X requires Snow Leopard or later, otherwise it falls back to using software rendering in the CPU. Thanks for the comments, and keep them coming!

On our Macs, we tested several 1080p videos on YouTube in Flash Player 10.1 and found that on average the 10.1 plugin used between 44-48 percent CPU. Watching the same movie in Flash 10.2 did drop the CPU usage down to the 18-22 percent range, but definitely not zero.

Worse, running the same tests on Adobe’s Stage Video optimized demos, Flash 10.2 actually performed worse than than it did on normal 1080p movies with the cpu usage varying widely between 5 and 60 percent (the 18-20 percent range appears to be the norm).

The short story is that, while Flash 10.2 does offer decreased processor usage, it doesn’t quite live up to Adobe’s claims. While Flash Player 10.2’s performance falls short of the hype, there’s no question that it’s a huge leap forward in terms of performance. The smaller CPU footprint alone is well worth the upgrade, provided you don’t mind running beta software. So far Adobe has not set a final release data for Flash 10.2.

One other thing to keep in mind: to take advantage of the new Stage Video tools, sites like YouTube and Vimeo will need to alter their video players. So, it may be some time before the full benefit of Stage Video’s improvements makes it to your day-to-day web browsing.

As for other new features in this release, there’s Internet Explorer 9 GPU support and support for fullscreen mode with dual monitors — meaning that you can have a movie on one screen and keep working on another.

Custom cursors get some love in this release, too, with Flash Player 10.2 handing off the job to the operating system rather than using resources to manually draw custom cursors. The beta also improves text rendering, adding sub-pixel rendering enhancements that should make your typography look a bit nicer and more readable.

It’s worth noting that the Flash Player 10.2 beta does not replace the Flash Player “Square” preview release — in other words, Flash Player 10.2 still isn’t 64-bit native. If 64-bit support is important to you, stick with the Flash Player “Square” preview.

See Also:

• Adobe Flash Player 10.1 Arrives
• Adobe Revamps Flash Player for Netbooks, P2P, Private Browsing
• Adobe Fights Off HTML5 Threat With New Flash Player 10.1

Can WAI-ARIA Build a More Accessible Web?

Accessibility in web design has come a long way since the days of table-based layouts with single-pixel .gif spacers. But even current best practices are far from perfect.

Today, we’ll tell you a bit more about these accessibility troubles as they relate to dynamic web apps — fitting, as today is Blue Beanie Day. For four years now, design guru Jeffrey Zeldman has encouraged web authors to wear a blue beanie on November 30 to show their support for web standards. Also, you’re encouraged to take a picture of yourself wearing a blue beanie and upload it to a Flickr pool. So, with standards quite literally on the brain, we’ll tackle the topic of rich web apps.

One of the coolest things about web apps is that elements refresh inside the browser without reloading the page. But most screen readers used by those with disabilities can’t parse these changes, so users who rely on them will remain unaware of any dynamically refreshed elements on the page. That’s just one of the many problems that WAI-ARIA, an emerging specification for Accessible Rich Internet Applications from the W3C, is hoping to solve.

At its core, WAI-ARIA is a means of annotating page elements with the roles, properties, and states that define exactly what those elements do. Take a navigation element as a simple example. In HTML5 we might do something like this:

<nav>
    <ul>
        <li>Home

        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

While it might seem that the

tag would defining the nav element’s “role,” not every browser will understand it (just because the browser can display it, does not mean it understands the tag). Also, the purpose of a navigation element may be obvious to most users, but to a screen reader being used by somebody who can’t see, the navigation strip could be just a jumble of words. Leveraging WAI-ARIA’s syntax, we can double up to ensure screen readers will know that this chunk of code is navigation:

<nav role="navigation">
    <ul>
        <li>Home</li>
        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

The

attribute is what’s known as a landmark role and is designed to let non-visual browsers know where they are.

It seems simple, and indeed when the spec is finished and fully supported by all the major screen readers, WAI-ARIA promises to make the web more accessible without overly complicating your markup. Unfortunately, there are numerous problems with WAI-ARIA at the moment, which make support uneven and can be confusing for web authors trying to do the right thing.

Our friends at A List Apart recently waded into the confusion and uneven support with two great posts on WAI-ARIA and how you can use it (and not use it) on your sites. The first article, The Accessibility of WAI-ARIA, dives into what WAI-ARIA is, what it’s trying to do, and why it’s not yet a panacea.

The second piece is more hands-on. ARIA and Progressive Enhancement looks at how ARIA fits within the progressive enhancement approach to web design. That is, when starting with valid HTML and enhancing it with CSS and JavaScript, how can you also work the WAI-ARIA attributes into your code?

The ARIA and Progressive Enhancement article also has a very informative table listing the varying levels of support in the latest versions of popular screen readers. Unfortunately, one of the main problems with WAI-ARIA today is that there’s no way to know the level of support a user agent has. Unlike CSS or JavaScript, there’s no reliable way to test which features a user agent supports (if any).

As Derek Featherstone writes in his ALA piece:

The problem that we have right now is that ARIA is an all or nothing deal. And writing scripts that respect both an ARIA supported methodology and a non-ARIA methodology is going to be incredibly difficult, because we have no reliable way of knowing the status of a user agent’s support for ARIA—it depends on something we can’t detect: the right combination of browser, assistive technology, and full ARIA implementation.

For more information on the various levels of support in screen readers and web browsers, have a look at Accessible Culture’s article, HTML5 plus ARIA “Sanity Check.” The post highlights some of the bugs, pitfalls and gotchas in current screen readers, as well as some workarounds and other non-ARIA solutions.

As Detlev Fischer writes in the first of the two ALA articles, “as long as older screen reader/browser combinations incapable of interpreting WAI-ARIA still constitute a significant part of the installed base, web designers who care for accessibility should use WAI-ARIA markup only to enrich their sites.”

In other words, use WAI-ARIA, but don’t rely on it. Make sure you have fallbacks in place until the spec is finalized and browser/reader support more widespread.

Unicorn photo from Wikimedia Commons/CC

See Also:

• Microdata: HTML5’s Best-Kept Secret
• W3C’s Unicorn Validator Checks Multiple Standards at Once
• Using Microformats in HTML5
• Add Semantic Value to Your Pages With HTML 5

PHP snippets to interact with Twitter

Get number of Twitter followers

Have you seen my blog sidebar? I display the number of followers I have in full text. This is actually pretty easy to do. The first thing you need is this function:

function get_followers($twitter_id){
	$xml=file_get_contents('http://twitter.com/users/show.xml?screen_name='.$twitter_id);
	if (preg_match('/followers_count>(.*)</',$xml,$match)!=0) {
		$tw['count'] = $match[1];
	}

	return $tw['count'];
}

Once you have the function, you can call it as shown below:

$nb =  get_followers('phpsnippets');
echo "PHP Snippets already have ".$nb." followers!";

» Credit: http://www.phpsnippets.info/get-twitters-followers-in-php

Get latest Twitter status

Using PHP and cURL, it is pretty easy to get the status of a specific user. Once you have it, what about displaying it on your blog, like I do in WPRecipes footer?

function get_status($twitter_id, $hyperlinks = true) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/$twitter_id.xml?count=1");
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $src = curl_exec($c);
    curl_close($c);
    preg_match('/<text>(.*)<\/text>/', $src, $m);
    $status = htmlentities($m[1]);
    if( $hyperlinks ) $status = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]", '<a href="%5C%22%5C%5C0%5C%22">\\0</a>', $status);
    return($status);
}

The function is extremely easy to use:

echo get_status('catswhocode');

» http://www.phpsnippets.info/get-twitter-status-using-php

Link to update status, without encoding problems

Many websites and blogs show you how to create a link to Twitter that will update your status. But unfortunely, most websites don’t explain what you need to do in order to avoid encoding problems of spaces and special characters.

<a href="http://twitter.com?status=@catswhocode Hi Jean, how are you?">Tweet!</a>

So, where’s the change? Pretty simple: Just note that I havent linked to

, but to

, without the www.

A working example can be seen on my company website: http://www.webdevcat.com/contact.

Get number of retweets for a specific page

Most bloggers are using the Tweetmeme widget to display the number of retweets of their posts. Did you know that Tweetmeme also has an API you can use to get how many times a specific url has been retweeted?

The following function will get the number of RT’s of the url passed as a parameter:

function tweetCount($url) {
    $content = file_get_contents("http://api.tweetmeme.com/url_info?url=".$url);
    $element = new SimpleXmlElement($content);
    $retweets = $element->story->url_count;
    if($retweets){
        return $retweets;
    } else {
        return 0;
    }
}

Using the function is easy, as you can expect:

echo tweetCount('http://www.catswhocode.com');

Note that the Twitter API also provide a way to get the number of retweets. See http://urls.api.twitter.com/1/urls/count.json?url=www.google.com for example.

» http://www.phpsnippets.info/get-how-many-times-a-page-have-been-retweeted-using-php

Testing friendship between two users

If you want to know if a specific user is following you (or someone else) you have to use the Twitter API. This snippet will echo

if the two users specified on lines 18 and 19 are friends. It will return

otherwise.

/* makes the request */
function make_request($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

/* gets the match */
function get_match($regex,$content) {
	preg_match($regex,$content,$matches);
	return $matches[1];
}

/* persons to test */
$person1 = 'phpsnippets';
$person2 = 'catswhocode';

/* send request to twitter */
$url = 'https://api.twitter.com/1/friendships/exist';
$format = 'xml';

/* check */
$persons12 = make_request($url.'.'.$format.'?user_a='.$person1.'&user_b='.$person2);
$result = get_match('/<friends>(.*)<\/friends>/isU',$persons12);
echo $result; // returns "true" or "false"

» http://www.phpsnippets.info/get-twitter-status-using-php

Shorten urls for Twitter

As you know if you’re a Twitter user, you can’t post messages which are longer than 140 characters. To avoid this problem, you have to use an url shortener. There’s lots of different url shorteners on the internet. TinyUrl.com is one of them, it doesn’t produce the shortest urls but what I really love it is that you don’t need to have an account to use it with PHP.

The following function takes a long url as a parameter and return a shorter url, using the TinyUrl url shortener.

function getTinyUrl($url) {
    return file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
}

» http://www.phpsnippets.info/convert-url-to-tinyurl

Shorten urls using Bit.ly

In the previous snippet of that article, I’ve shown you how you can shorten your urls using TinyUrl.com. This is cool, but I’m pretty sure some of you prefer using the bit.ly service. No problem, you can still use PHP to get your shortened url.

function bitly($url) {
	$content = file_get_contents("http://api.bit.ly/v3/shorten?login=YOURLOGIN&apiKey=YOURAPIKEY&longUrl=".$url."&format=xml");
	$element = new SimpleXmlElement($content);
	$bitly = $element->data->url;
	if($bitly){
		return $bitly;
	} else {
		return '0';
	}
}

To use the function, simply use the following:

echo bitly("http://www.catswhocode.com");

» http://woorkup.com/2010/06/06/3-practical-wordpress-code-snippets-you-probably-must-know/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP snippets to interact with Twitter

PHP: Fast and easy SQL queries using ezSQL

What’s ezSQL, and why it is useful

On big projects, the usual good practice is to use a CMS or a framework such as Symfony or CodeIgniter to build your site on. But on smaller projects, many developers are still using PHP functions such as

to do SQL queries to the database.

While it’s functional, I do not recommend to use all those

functions: Most websites are using MySQL, that’s right, but if one day you have to deal with another DB like PostGres or Oracle… Your code will not work at all, and you’ll have to rewrite it. Scary, isn’t it? This is why is it recommended to use a database abstraction layer, an API which unifies the communication between your application/website and databases such as MySQL, Oracle or PostgreSQL.

As you can guess, ezSQL allows you to work with various databases very easily. Though, please note that it does not support differences in SQL syntax implementations among different databases.

Also, ezSQL provide a few methods which simplify queries to the database, and help producing a cleaner code.

ezSQL and WordPress

As most of you are familiar with WordPress, you probably know the

class, which allows you to send queries to the database. As wpdb is based on ezSQL, and you’re already familiar with the WordPress class, you won’t have any trouble to learn using ezSQL. And don’t worry if you never heard of WordPress or the wpdb class. ezSQL is extremely easy to learn and to use.

Downloading and installing ezSQL

Right, I have talked too much. How about some coding now? Let start by grabbing your copy of ezSQL. Once you have it, unzip on your server (or hard drive).

In order to be able to use ezSQL in your projects, you have to include two files: The first is

, which is ezSQL core file. The second depends on the database you’re going to use. In order to use ezSQL with a MySQL database, you have to include

.

Once done, you have to create a ezSQL object. This is done easily using your database username, password, name and host. The following example demonstrates the inclusion of the required files and the creation of a ezSQL object:

include_once "../shared/ez_sql_core.php";
include_once "ez_sql_mysql.php";
$db = new ezSQL_mysql('db_user','db_password','db_name','db_host');

Now, you have an object called

. We’ll use it run any types of queries to our database.

Queries examples

ezSQL has a few methods to make SQL queries extremely simple. Let’s see what you can do with it:

Execute any query

In order to insert, delete or most generally, run any kind of query to the database, we have to use the

method. In case of a data insertion, the method will return the insert id.

$db->query("INSERT INTO users (id, name, email) VALUES (NULL,'The Cat','cat@google.com')");

Example of an update query:

$db->query("UPDATE users SET name = 'Patrick' WHERE id = 4");

Select a row

The

method is great if you just need to select a row from your database. The example below executes a simple select query and displays the results.

$user = $db->get_row("SELECT name, email FROM users WHERE id = 4");

echo $user->name;
echo $user->email;

Select a single variable

If you only need a variable, the

method is here to help. Using it is extremely simple as shown below.

$var = $db->get_var("SELECT count(*) FROM users");

echo $var;

Select multiple results

Although the methods documented above are quite useful, most of the time you’ll need to get various rows of data from your database. The method called

will get various data from your database. To output the data, a simple

loop is all you need.

$results = $db->get_results("SELECT name, email FROM users");

foreach ( $results as $user ) {
    echo $user->name;
    echo $user->email;
}

Select a column

If you need to get a column, you can use the get_col method. The second parameter is the column offset.

foreach ( $db->get_col("SELECT name,email FROM users",0) as $name ) {
            echo $name;
}

Debug

When something doesn’t work as expected, ezSQL has a great method to perform some debugging. Not surprising, the method is called

. When called, the method will display the last query performed and its associated results.

$db->debug();

I hope you enjoyed this article and that you’ll use ezSQL in your future projects. It’s a great tool which was very helpful for me many times!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP: Fast and easy SQL queries using ezSQL

Best practices for modern Javascript development

Use the correct <script> tag

When you have to use some Javascript in an html file, you should always use the following

tag:

<script type="text/javascript">
    ... some JS code
</script>

But instead, how many times have you seen this when looking at the source code?

<script type="text/javascript" language="javascript">
    ... some JS code
</script>

In HTML, the

attribute is deprecated due to its redundancy with the

attribute. You should never use it anymore.

Keep your code in an external file

Using an external

file for your Javascript code is a lot cleaner than writing it in your html document, and it also allows the browser to cache the file, which will result in a faster website.

Put your Javascript code in a

file, then use the

tag in your html document to import the file:

<script type='text/javascript' src='http://www.catswhocode.com/myscript.js'></script>

Don’t wrap code in HTML comments

In the 90′s some very old browsers weren’t able to interpret Javascript. In order to prevent unwanted results on those browsers, it was considered good practice in 1994-1997 to wrap Javascript code within html comments, so browsers with no Javascript support will simply ignore it.
Here is an example of some code wrapped within html comments:

<script language="JavaScript">
<!--
...some code
//-->
</script>

However, in 2010, all browsers (Even IE6, that means a lot) can interpret Javascript, so there’s absolutely no need to wrap code within comments anymore. Even worse, if code is wrapped within comments and use the decrement symbol

, you’ll expect some weird problems due to the fact the browser may think it’s the end of the html comment.

Use a framework

Unless your Javascript code is really short and easy, you should always avoid reinventing the wheel by using a framework of your choice. In my opinion, jQuery is the best and has an awesome community, so you should give it a try if you haven’t already.

Always declare your variables using var

You should introduce any variable you create with the

statement, otherwise it gets to the global scope. Also, using

makes your code more readable and self-explanatory.
Example of variable created using the

statement:

var name = "Jean";
var size = data.length;

Keep your code unobtrusive

Some years ago, when a programmer wanted to add an event to an html element (for example, if you want to validate a date when the user typed something) he simply put Javascript code in the html, using a special attribute such as

,

,

, etc.
Example:

<input type="text" name="date" onchange="validateDate()" />

This works great, but it is a bit dirty. HTML should only contain the document description. Just like it’s bad practice to use inline CSS styles, it’s bad practice to use inline Javascript.

Instead, what about using some unobtrusive Javascript? Using jQuery, it is pretty easy to do, as you can see in the following example:

$(document).ready(function(){
	$('input[name=date]').bind('change', validateDate);
});

Include your scripts at the bottom of your HTML files

Not so long ago, it was generally considered good practice to insert your Javascript files within the

and

tags of your html document.
But browsers read html files from top to bottom, and load external files dynamically. Which mean that inserting scripts within the

and

tags will make your Javascript load before some of the page content.
In order to always load scripts after the content, Javascript files should always been included at the bottom of your html files, as shown below:

    <script src="myscript.js?" type="text/javascript"></script>
  </body>
</html>

Use JSLint

JSLint is a web-app which takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate solution.
JSLint is great to find bugs in your code, and also things that may be written in a better way. This site is definitely my favorite coding buddy when developing some Javascript.

Don’t use document.write

The good old

method has been deprecated for years, however it is still very common to see it while browsing code.

document.write("hello world");

Instead of using this deprecated method, you should use the DOM and the

function to insert text on a page:

document.getElementById('hello').innerHTML('hello world');

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Best practices for modern Javascript development