New Flash Player 10.2 Goes Easy on the CPU

flash logo[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:

Tags: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Mining Flickr to Build 3D Models of the World

Microsoft’s PhotoSynth tool is jaw-droppingly awesome. But, because it’s a Microsoft project, the technology is unlikely to appear on some of your favorite non-Microsoft online apps, like Google Maps or Flickr.

However, our friends at ReadWriteWeb stumbled across a very similar tool — at least in terms of the end result — developed by the University of North Carolina in conjunction with Swiss university, ETH-Zurich.

The team has developed a method for creating 3D models by pulling in millions of photographs from Flickr and using some fancy algorithms to generate 3D models of local landmarks. Perhaps even more impressive the results can be generated using a single computer in under a day.

Project lead Jan-Michael Frahm touts the project’s efficiency saying, “our technique would be the equivalent of processing a stack of photos as high as the 828-meter Dubai Towers, using a single PC, versus the next best technique, which is the equivalent of processing a stack of photos 42 meters tall — as high as the ceiling of Notre Dame — using 62 PCs. This efficiency is essential if one is to fully utilize the billions of user-provided images continuously being uploaded to the internet.”

While the results are cool and would make an impressive addition to any number of geo-based services, more serious use cases include helping disaster workers get a better idea of where they’re headed and the extent of damage.

So far the researchers have released a movies demonstrating the technique on landmarks in both Rome (get it? built in a day…) and Berlin, and the results are impressive. For more information on how the process works, check out the UNC website.

See Also:

Tags: - - - - - - - - - - - - - - - - - - - - - - - - - -

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','')");

Example of an update query:

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

Select a row



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;


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.


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

Tags: - - - - - - - - - - - - - - - - - - - - - - - -

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



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

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

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

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=''></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

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



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.

<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:

	$('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




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




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>

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

Tags: - - - - - - - - - - - - - - - - - - - - - - -

10 useful new WordPress hacks

Remove comments autolinks

If someone leaves a comment containing a url, the url will be automatically transformed to a link by WordPress. This can be useful, but personally I don’t like to see many links in comments, especially when they’re a bit spammy.
This is why I decided, on the latest CWC theme, to remove comments autolink. Doing so is pretty easy, just paste the following into your functions.php file. Once you saved the file, you’ll notice that autolinks have disappeared.

remove_filter('comment_text', 'make_clickable', 9);

» Source:

Automatically notify your users of new posts

If you run a private site using WordPress, then it could be useful to notify your users when a new post is published. The following snippet will get all user emails from your database and will send an email to them automatically when a post is published.
Of course, you shouldn’t use that code on your blog as it does not currently have any unsubscribe option.

function email_members($post_ID)  {
    global $wpdb;
    $usersarray = $wpdb->get_results("SELECT user_email FROM $wpdb->users;");
    $users = implode(",", $usersarray);
    mail($users, "New WordPress recipe online!", 'A new recipe have been published on');
    return $post_ID;

add_action('publish_post', 'email_members');

Twitter style “time ago” dates

Displaying dates using the “5 days ago” format is becoming very popular on blogs, thanks to Twitter popularity.
I have seen lots of complicated tutorials to use this format on your WordPress blog, however many people don’t know that WordPress has a built-in function to do the same thing:



Paste the snippet below anywhere within the loop, and it will display your dates using the “time ago” format.

Posted <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>

» Source:

Display post thumbnail in your RSS feed

Introduced in WordPress 2.9, the


function is very useful to easily add and display a thumbnail attached to a post. Unfortunately, there’s no built-in way to display this thumbnail on your RSS feed.

Happily, the function below will solve this problem. Simply paste it in your


, save it, and the post thumbnail will be automatically displayed on your RSS feed.

function diw_post_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
	return $content;
add_filter('the_excerpt_rss', 'diw_post_thumbnail_feeds');
add_filter('the_content_feed', 'diw_post_thumbnail_feeds');

» Source:

Block external requests

By default, WordPress does some external requests in order to get the available updates and the WordPress news shown in your dashboard. Personally, I don’t mind them, but I’ve recently had clients who didn’t wanted any external requests. So, I’ve blocked them using this interesting hack.
Simply add the following line to your



define('WP_HTTP_BLOCK_EXTERNAL', true);

If you need to allow some external requests, it it easy to create a whitelist, as shown below:

define('WP_ACCESSIBLE_HOSTS', '');

This line of code have to be pasted in


as well.
» Source:

Easy debug mode

When things go wrong, you can always use the super useful WordPress debug tool,


. By default, you have to paste a line of code in your


to make the debug mode available.
By if you need to easily access the debug mode even when your site is live, you should edit your


file and replace

define('WP_DEBUG', true);


if ( isset($_GET['debug']) && $_GET['debug'] == 'debug')
  define('WP_DEBUG', true);

Once done, simply add a GET parameter to the url of the page you’d like to debug, as shown below:

Of course, for obvious security reasons you should replace the name debug by a random word of your choice so no one will ever see your site in debug mode.
» Source:

Use WordPress shortcode in theme files

WordPress shortcodes are a super easy way to add content such as rss feeds, google maps, galleries and more into your posts or pages. But what about being able to output shortcodes in your theme files?
A built-in function exists, but most people never heard of it. The function is called


. It takes one parameter, the shortcode you’d like to display. I’ve heard you can ad more than one shortcode as a parameter, but I haven’t tried it yet.


» Source:

Allow upload of more file types

If you ever tried to upload some not so common filetypes, such as Textmate’s


to your WordPress blog, you may have experienced an error, because WordPress simply doesn’t want you to upload some other file type.
Fortunately, you can add new file types to WordPress whitelist. Doing so is quite easy, just paste the following piece of code in your


, and you’re done.
Note that file types have to be separated by a pipe.

function addUploadMimes($mimes) {
    $mimes = array_merge($mimes, array(
        'tmbundle|tmCommand|tmDragCommand|tmSnippet|tmLanguage|tmPreferences' => 'application/octet-stream'

    return $mimes;

add_filter('upload_mimes', 'addUploadMimes');

» Source:

Google Docs PDF viewer shortcode

Google Docs is definitely the easiest way to read documents in .pdf, .doc or .xls online. So, if you want to share a PDF file with your readers, what about creating a shortcode that will open the PDF in Google Docs instead of forcing download?

Simply paste the code in your



function pdflink($attr, $content) {
	return '<a class="pdf" href="' . $attr['href'] . '">'.$content.'</a>';
add_shortcode('pdf', 'pdflink');

Once you saved the file, you’ll be able to use the shortcode on your posts and page. Here is the syntax:

[pdf href=""]View PDF[/pdf]

» Source:

Detect the visitor browser within WordPress

Well, this hack is not so new, but it still remains one of my favorites. What this code does is pretty simple, it detects the name of the visitor browser and adds it to the


That way, you can correct browser-specific problems extremely easily. The function has to be pasted in your



function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;

The function output will look like:

<body class="home blog logged-in safari">

» Source:

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

10 useful new WordPress hacks

Tags: - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Enhance your web forms with new HTML5 features

Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.

Required fields

Whose ever tried to submit a form and gotten an error message saying that you “forgot” to enter your email address? Probably not a lot of us: In fact, 99 percent of all web forms have at least one field marked as required.

In good ol’ HTML, we had to manually display that a specific field is required, most of the time by using a red asterisk. But with HTML5, you can set up a input field to be required:

<input type="text"  name="client_name" required>

And on the CSS side, something like

input:required {
    border: 1px red solid;

will save you a lot of time.

Two similar attributes are also available:




. They work exactly as the


attribute explained above.


In a form, an input field always has a label explaining what kind of information is required. While you can currently use the


tag to display a label for a specific text field, HTML5 introduces the


attribute. As shown below, using it is pretty simple:

<input name="firstname" placeholder="Please enter your first name">



attribute works exactly as the


attribute, except that when the user click on the text field, the placeholder text is automatically removed so the user can easily enter his information.

The placeholder attribute currently works only in safari/webkit. Don’t worry about other browsers though, it is pretty easy to simulate placeholders using javascript:


A new HTML5 attribute is named


. If applied to an element, the element will automatically receive the focus once the page is loaded. This can be seen on some sites and most search engines.

Nothing complicated, just use the syntax below, and remember that in HTML5, there’s no more need for attributes to have a value like in XHTML 1.0.

<input name="search" autofocus>

Email fields

Asking someone’s email on a web form is extremely common because email is still the easiest way to contact someone over the internet. HTML5 introduces a new type for the input element, named



<input name="email" type="email">

Pattern attribute

When validating a web form, we have to validate the data entered by the visitor. The new


HTML5 attribute allows you to define a regular expression pattern. Only the data that matches the defined pattern will be validated. If the data doesn’t match the pattern, then the form will not be submitted.

This is, in my opinion, an extremely good thing, which will save lots of time to developers when coding forms. Though, remember that you should always validate data on the server side as well.

<input type="text" name="Phone" pattern="^0[1-689][0-9]{8}$" placeholder="Phone" required>

Url fields

Nowadays, many people have a website, blog, or at least a Twitter profile. This is why many web forms offer the possibility to enter an url.

HTML5 introduces a new type for the


element, designed specifically for entering urls:

<input name="url" type="url">

Although I didn’t test it myself, I heard that the W3C validator will raise an error if the value of a url field doesn’t match a proper url structure.

Date pickers

Many businesses are offering an appointment request through their website. In that case, the visitor has to specify the day they would like an appointment. HTML5 introduces the


type for the



<input name="day" type="date">

When clicked, the


attribute will display a date picker so visitors will simply have to choose a date instead of entering it manually. Unfortunately, except in Opera, most browsers don’t have it implemented yet.

Note that a date picker can be implemented on your forms using the following types:

<input type="date">
<input type="datetime">
<input type="month">
<input type="week">
<input type="time">

Isn’t that user friendly? Personally, I can’t wait to implement this in my forms but as I said earlier this isn’t very well implemented in browsers at the time of writing this post. Of course, Javascript is always here to help. On this site I found a simple fallback implementation for the

input type=date

HTML5 attribute:

var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
    // No HTML5 native date picker support, use jQuery or your favorite framework to create one.

Search boxes

To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new type for search fields.

<input name="q" type="search">

For now, the only difference with regular text inputs is that, if you use Safari, the search box will have rounded corners. But maybe interesting functionalities will be implemented in the future. Let’s hope, because right now I have to admit that I don’t really see why we should use this type.

Sliders type and step attribute

HTML5 is also introducing sliders: A new type for the input element, which allows visitors to easily select a number instead of entering it manually.

<input name="number" type="range" min="0" max="10">

The example above allows the visitor to choose a number between 0 and 10. If you want the slider to be incremented/decremented 2 by 2, you’ll have to use one more new attribute: step. Here is an example:

<input name="number" type="range" min="0" max="10" step="2" >

That way, visitors will only be able to select numbers like 0, 2, 4, and so on.

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

Enhance your web forms with new HTML5 features

Tags: - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Pirates in peril (week in review)

Movie studios and record labels increase the pressure on file sharers, while the tech industry ponders the election results. Also: Google sues the U.S.

Tags: - - - - - - - - - - - - - -

Twitter’s promoted tweets come to Google

Google’s real-time search results pages will now feature ads sold by Twitter, the first time the company has allowed an outside party to advertise on its pages.

Tags: - - - - - - - - - - - - - - -

Brightroll Publisher Survey 2010 Results – What is Important to Continued Online Video Ad Growth

Brightroll surveyed leading online publishers in the U.S. to find out what industry stakeholders feel are important to help continue the growth of the online video advertising industry and continue the massive strides that have been achieved already. However, after reading their findings, I’m left with more questions than when I began reading it.Online video [...]

Tags: - - - - - - - - - - - - - - - -

How To Get Your Videos On Google TV – One More Benefit Of Video Sitemaps

I’ve certainly been a proponent of Google’s Video Sitemaps for getting into Google Videos and Google Universal Search results…  I’ve also eluded to the notion that one reason behind Google’s push to educate publishers about video sitemaps had to do with their desire to increase the content available for Google TV.   I recently got [...]

Tags: - - - - - - - - - - - - - - - -