I’ve never been particularly complimentary about the official jQuery Plugin Registry. The team are working on it, but perhaps the kindest observation is that it’s “ctional” — functional with all the “fun” removed. The system lacks an easy interface, good search facilities, online demonstrations, developer ratings and reviews.

As an alternative, why not try unheap.com — a new independent jQuery plugin repository…

The benefits of unheap.com become apparent the moment you use it:

• The site has a gorgeous dynamic and responsive interface — it’s a pleasure to use
• Plugins are categorized in sections and sub-sections for interface, inputs, media, navigation and miscellaneous code.
• The search facility works well.
• Plugin lists have direct links to demonstration pages and videos.
• Related plugins are listed.
• User views, votes and bug reports are recorded.
• Social media sharing facilities are provided.
• An RSS feed of new and updated plugins is available for you to check in Google Reader, erm, a compatible RSS Reader.
• The plugin submission process is easy and straight-forward.
• Almost 700 plugins are available at the time of writing.

I’m impressed. Unless the jQuery team can produce a system as nice as unheap.com, perhaps they should give up now and adopt it as the “official” repository?

Unless you’ve found something better?…

We’re one third of the way through 2013 and an interesting battle has commenced between the two leading vendors. These are the latest figures according to StatCounter…

Worldwide Browser Statistics March 2013 to April 2013

The following table shows browser usage movements during the past month.

Worldwide Browser Statistics April 2012 to April 2013

The following table shows browser usage movements during the past twelve months:

The tables show market share estimates for desktop browsers. The ‘change’ column is the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 10.3% of IE6 users abandoned the browser last month. There are several caveats so I recommend you read How Browser Market Share is Calculated.

Chrome jumped another 1% during April. That growth can’t continue, but there’s no sign of it stopping yet. Only one application managed to put up a fight: IE10. Microsoft’s browser grew an impressive 4% in one month following the automated update for Windows 7. While the other versions all dropped, IE10 more than made up the difference.

Talking of which, IE8 had a 1% drop and has fallen below 10%! While the browser did much to rectify the issues in IE6 and IE7, development will be far easier when we can depend on widespread HTML5 support without shims. It still has a healthy percentage but many businesses will be forced to consider alternatives when Microsoft drops Windows XP support next year.

IE6 and IE7 have become mostly irrelevant. I’m tempted to remove them from the chart, but…

1. some developers use the figures as justification for dropping the decrepit browsers, and
2. it gives me a smug sense of satisfaction to watch the numbers tumble.

However, I’m relieved Microsoft can take on Google because the others are struggling.

Firefox holds just over 20% of users but is likely to fall below that threshold next month.

Safari didn’t have a great month and fell 0.5%. It’s a reasonable browser but would it be so popular if Apple didn’t enforce usage on iOS? Users could fall further if Webkit development falls significantly behind Blink.

Finally, 14% of Opera users switched last month and it’s dropped to 1%. Perhaps that’s understandable; Presto has been abandoned for Blink so is there any point sticking with a browser which will soon be superseded?

Mobile Browser Usage

Mobile usage decreased slightly to 13.9% of all web activity in April 2013.

The primary mobile browsing applications:

1. Android — 30.96% (up 0.18%)
2. iPhone — 23.94% (down 0.50%)
3. Opera Mini/Mobile – 15.35% (down 0.19%)
4. UC Browser — 8.74% (up 0.47%)
5. Nokia browser — 7.03% (up 0.07%)

In comparison to the desktop market, there’s very little to report. I guess it’s a quiet time of year with no significant releases or disruptive technologies. Nothing to see here. Please move along and return next month!

MySQL — the world’s most-used relational database — will be 18 next month. The first version was developed by Michael Widenius and David Axmark and released by MySQL AB on May 23, 1995. The open source product rapidly gained traction alongside PHP to become an integral part of the LAMP stack.

Sun Microsystems obtained MySQL for $1 billion in January 2008. 15 months later, Oracle acquired Sun for $7.4 billion and became the owner of Java, VirtualBox, OpenOffice and MySQL. The takeover caused significant controversy since the world’s biggest commercial database provider now controlled a major open source competitor.

Michael Widenius was particularly critical and released his own MySQL fork under the GNU General Public License from his own company, Monty Program AB. MariaDB is designed to maintain compatibility and be a drop-in replacement for MySQL.

Here’s where it gets interesting: Monty Program AB has signed a merger agreement with SkySQL. SkySQL was formed by former MySQL executives — including David Axmark — when Oracle acquired the database from Sun. The MySQL band are back together!

The new company will continue to use the SkySQL name to support and develop MariaDB. Michael Widenius stated:

The MySQL database is named after my first daughter, My. The MariaDB database is named after my second daughter, Maria. With this merger and my own role in the MariaDB Foundation, I’m ensuring that the MariaDB project will remain ‘open source forever’, while knowing that enterprise and community users of both the MySQL and MariaDB databases will benefit from best-in-breed products, services and support provided by SkySQL. And who doesn’t want the best for their children?

MySQL has a stronger rival. It’s reassuring news especially for those with any concerns regarding Oracle’s plans for the open source database.

See also:

• SkySQL Merges With MariaDB Developers To Create ‘Next Generation Open Source’ Database Company
• MariaDB.org
• SkySQL.com
• MariaDB vs MySQL — compatibility

You have just written a new feature for your awesome application that searches through your database to find ‘x’ and you run some tests to check that the returned result is correct.

Unfortunately, your test fails because it returns more results than expected. At first this is not obvious because it’s been a while since you worked on the application, but eventually you realise that every search should be automatically filtered out by a boolean field.

You may have run into a similar situation where you or someone has forgotten to filter by a value in field x and it’s now potentially showing incorrect data, thereby damaging business. Fortunately, there are some tests in place to catch this.

Let’s work through an example. You have a user table and, with good reason, you are utilizing a boolean field to represent what the state of the user is, perhaps to determine if it is disabled. You could copy data from a “live table” to a “disabled table” but you feel the complexity and overhead to implement this is too high, because of other user related tables.

With the above scenario in mind, I think MySQL Views can improve on this solution. Views are quite simple things. They present a table based on the defined SELECT query. We can create a view that will only return users that are enabled in the system and which will prevent future features from including disabled users.

I’ll explain how to create this view and how to use it in your application. Something to note is MySQL views are only available from version 5.

Here is the basic user table the view will be based on:

CREATE  TABLE `users` (
`user_id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
`first_name` VARCHAR(100) NULL ,
`last_name` VARCHAR(100) NULL ,
`username` VARCHAR(100) NULL ,
`dob` DATETIME NULL ,
`disabled` BIT NULL DEFAULT 0 ,
PRIMARY KEY (`user_id`) );

Below is the query that will create a MySQL view for the above user table.

CREATE OR REPLACE ALGORITHM = MERGE VIEW `v_users_enabled`
(`firstName`, `lastName`, `username`, `dob`)
AS
SELECT `first_name`, `last_name`, `username`, `dob`
FROM `users`
WHERE `disabled` = 1;

How does it work?

Here is a breakdown of the keywords used to create a view.

CREATE OR REPLACE

This creates a new view and is required. Optionally you can add OR REPLACE if you want to make certain it is created but if you know the view exists already you can use ALTER to make changes to an existing view.

ALGORITHM = MERGE

This is an optional statement and by not defining one or explicitly stating ALGORITHM = UNDEFINED, MySQL will choose between two options that best fit the SELECT statement, i.e. MERGE or TEMPTABLE. MySQL will try to choose MERGE over TEMPTABLE where possible because it is more efficient. I will discuss more about the algorithm after going through these core points.

VIEW

Is a required statement and is used to give a name to the view. Crucially a view cannot have the same name as a table because they share the same name space.

The column list part is optional and by default the column names in the SELECT statement are used. If you choose to define column names they are comma separated, must be unique and match the number of columns in the SELECT.

AS

Is required and where you define the SELECT query.

Querying a view is the same as when querying a table. Here’s a simple example:

SELECT * FROM v_users_enabled

More about the algorithm

When defining the algorithm, you have three options to choose from: MERGE, TEMPTABLE or UNDEFINED.

We now know that UNDEFINED lets MySQL choose the appropriate option, but what do the other two options mean?

MERGE is the fastest out of the two options. The view column list replaces what is in the SELECT statement, essentially merging faster than TEMPTABLE as that generates a new temporary table that is queried upon and which has no indexes. MySQL will warn you if you try to use MERGE when a TEMPTABLE should be used and will change it to TEMPTABLE.

When will the TEMPTABLE option be used? If you use any aggregation function, DISTINCT, LIMIT, GROUP BY, HAVING, sub query or literal values (i.e. no table).

Minor performance trade off

Unfortunately, MySQL views will hinder performance rather than improve it. It is important to think about your views and to use MERGE where possible to minimise performance reduction.

Provided your performance budgets can take the hit to better manage complexity and create a useful separation this, in my view, is a worthy trade off because you are taking a query with certain where clauses that may need to be applied to other queries. This is nicely contained within a view and database level users can query against this returning them the correct results, without them having to remember they need these additional where clauses.

The downside of this containment is that it would be possible to write a complex query within the view which is now hidden. Queries with more where clauses on this view will make the overall query a monster and potentially inefficient. A judgement call will need to be made on how complex the view SELECT query can be without compromising performance.

To better optimize for performance when using a view, use the MERGE algorithm and when creating your index add the fields in your WHERE clauses that exist in the view first. It is important they are put in the correct order, as usual when creating indexes for expected queries. You can use EXPLAIN to check your query and make sure its behaving as you expect.

Benefits and Negatives

The benefits of using a view:

• Provide a useful data separation from application by containing the need to remember specific fields the query needs to filter by for all SELECT statements within the database.
• Tables can change over time and you need to add some new fields that you intend to filter by for most SELECT queries. All that needs to change is the SELECT statement with the new fields after altering the tables. Then updating the application will be easier as you may only need to remember to change it in a few places.
• They can make your SELECT queries more readable.

The negatives of using a view:

• When the TEMPTABLE algorithm is used no index is used.
• They could hide a complex query and with querying the view could turn it into a sluggish query.
• Using the MERGE algorithm limits your view SELECT statement to basic querying only.
• You may choose the MERGE algorithm but if MySQL thinks it should use TEMPTABLE then it will change it.
• If your view does not have a one-to-one relationship with the table then it is not updatable.
• When you do add or change a table you will still need to update the CUD statements in your application.
• You cannot associate a trigger with a view.

Noteworthy quirks

If you want to use ORDER BY in your view SELECT statement it is worth noting that this cannot be overridden when you query the view using a different order.

If you decide to put a LIMIT in your view and then use another LIMIT when you query the view it is undefined which LIMIT applies.

If you are interested in making a view updatable see MySQLwebsite.

Conclusion

MySQL views are a useful tool and provide a good solution in particular scenarios. It is clear that views have their limits and it is important to be aware of them. Used in the right way your next app can benefit from flexible containment and control over how the data is accessed.

In a surprise statement released last week Google announced that Chrome and Chromium are to adopt a new rendering engine named ‘Blink’. Blink is a fork of Webkit introduced because:

• Chrome uses a different multi-process architecture to other Webkit browsers
• It provides Google with further performance improvement opportunities.

Google stated:

Blink’s mission is to improve the open web through technical innovation and good citizenship.

We believe that having multiple rendering engines — similar to having multiple browsers — will spur innovation and over time improve the health of the entire open web ecosystem.

All very noble. But was Google’s decision politically motivated? Webkit is open source; there are no technical reasons why Google couldn’t implement improvements. However, Webkit is largely controlled by Apple — a competitor. At best, Safari would have the same technologies. At worst, Apple could block features which offered Google a competitive advantage (such as Dart).

Regardless of the reasons, Blink is good for the web.

Webkit has never been a single rendering engine so another fork will have little immediate impact. Over time, Blink will proceed along a different path unencumbered by Webkit stakeholders. The engine will be one of Google’s top priorities and should evolve rapidly.

Blink will appear in Chrome 28 and also be adopted by other browsers based on Chromium — including the new version of Opera and RockMelt. We may have lost Presto, but Blink goes some way to redress the balance. The web has four major rendering engines once more — even if two will be mostly identical for a few months.

Will There be a New Vendor Prefix?

No. Blink will continue to support some -webkit prefixes for legacy compatibility but all prefixes will eventually disappear. Experimental DOM, CSS and JavaScript features will be available without a prefix but the developer must enable those facilities with a single setting in about:flags.

I’m not wholly convinced it’s a major improvement. Unless other vendors embrace the policy, developers will have the same number of prefixes to manage and remember (or forget).

Other Downsides?

Apple has most to lose. Webkit’s development team has been cut by 50% and the engine has just lost almost 40% market share. The web is everything to Google but a distraction for Apple; Safari could fall behind other browsers.

Testing has also become a little more difficult for web developers. While you could never rely on Chrome-compatible code working in Safari, differences were rare. That’s no longer the case.

The situation was complicated further when Apple dropped Safari on Windows. Windows developers must either buy a Mac, hope other Webkit browsers are close (Dooble, QupZilla, SlimBoat) or rely on Apple providing test facilities like Microsoft did for OS X users.

Finally, while Blink is technically open source, it’s Google’s baby. Chrome’s dominance means Google can change Blink in ways that were not possible before. The company could be dictating web standards before we know it — especially if they enable non-prefixed features which operate differently in other browsers.

Despite the pitfalls, Blink seems an appropriate name — the web’s future just became a little brighter.

Unless you think otherwise?…

March ended one week ago but, just as you think the browser market is stabilizing, Google puts another spring in its step. Here are the latest figures according to StatCounter…

Worldwide Browser Statistics February 2013 to March 2013

The following table shows browser usage movements during the past month.

Worldwide Browser Statistics March 2012 to March 2013

The following table shows browser usage movements during the past twelve months:

The tables show market share estimates for desktop browsers. The ‘change’ column is the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 5.9% of IE7 users abandoned the browser last month. There are several caveats so I recommend you read How Browser Market Share is Calculated.

Just as I think Google cannot possibly increase their share further, Chrome takes another 1% bite of the browser market. The last time this occurred was July 2012. To put it into context, that’s the equivalent of every Opera user or all combined IE6 and IE7 users abandoning their browser in a single month.

Chrome was the only mainstream browser with positive growth last month and it’s clear other vendors are struggling to compete. Does Google have an unfair commercial advantage? Few users pass a day without using the search engine, GMail, Analytics, Reader or another vital service which politely suggests they switch to Chrome. Google also has the cash reserves to promote their browser on prime-time television, at the movies, in newspapers and magazines. And let’s not forget Google controls the world’s most-used smartphone platform and Chrome OS.

That said, advertising would be worthless without a good application. Developers like Chrome. Users like Chrome. Even the most ardent IE, Firefox, Safari and Opera fanboys have little bad to say about the browser. It may no longer enjoy significant technical advantages but other vendors must either produce more competitive software or hope Google becomes complacent.

IE9 has been hovering around 18% for six months but IE10 has begun to cannibalize its share following the recent Windows 7 update. At the end of March, IE9 had 15.81% and IE10 2.26%. IE8 dropped more than any other browser and looks likely to fall below 10% this month. IE6 and IE7 barely changed but they’ve become mostly insignificant.

Firefox fell another 0.5% and it’s starting to look like a monthly trend. The browser works well on Windows and is more than a match for Chrome but I suspect it’s lost most ground on Mac, Linux and mobile platforms. Unless Mozilla can convince users to stay, Firefox could drop below 20% by the end of May 2013.

Safari had a better month than most but almost 6% of Opera users abandoned the desktop browser. That could be a statistical anomaly or perhaps users are unimpressed with the company’s switch to Webkit? Let’s see how they fare on mobile devices…

Mobile Browser Usage

Mobile usage increased a fraction to 14.44% of all web activity during March 2013.

The primary mobile browsing applications:

1. Android — 30.78% (down 0.76%)
2. iPhone — 24.44% (up 0.08%)
3. Opera Mini/Mobile – 15.54% (up 0.14%)
4. UC Browser — 8.27% (down 0.07%)
5. Nokia browser — 6.96% (up 0.05%)

It’s difficult to spot trends because the mobile market is erratic and influenced by local factors. For example, the iPhone is massively popular in western countries, but less so in Asia, Africa and South America where Android and Opera compete for the top spot.

There’s been a slightly unusual fall for Android but I wouldn’t read too much into that. The Chrome mobile browser has a 2.02% market share and is starting to increase as rapidly as its desktop cousin. Google is everywhere.

Version numbers may be meaningless but Firefox 20 marks a milestone for Mozilla’s flagship browser. The new release appeared on April 2 exactly six weeks after version 19. If you don’t have it, open Help > About Firefox or download the browser from getfirefox.com.

Firefox 20 has a surprising number of new features — let’s look at the best…

Developer Tool Updates

Firefox has received an incredible number of tools within the past few releases. The Developer menu has been reorganized to order them more effectively and a new Toggle Tools option provides quick access to the Web Console. The Console can also be viewed within its own panel as well as docked.

A new JavaScript Profiler had been promised for version 20 but the feature has been delayed for a later release.

New Download Manager

If I recall correctly, this is the first major update to the Download Manager since it appeared in Phoenix back in 2002. The dedicated panel has been replaced by a drop-down list accessed by a new toolbar icon which highlights the time remaining:

It’s a nice touch. Previous downloads are still logged in bookmarks and history panel.

getUserMedia Support

Firefox now provides the getUserMedia HTML5 API which has been available in Chrome and Opera for several months. With the user’s permission, you can capture audio and video from a microphone or camera. Opera’s Photo Booth provides an excellent demonstration of the technology.

canvas Blend Modes

When you draw on a canvas element any existing pixels are normally replaced. However, the new globalCompositeOperation property permits Photoshop-like overlay effects including multiply, screen, darken, lighten, color-dodge, color-burn and difference. Refer to this Mozilla article for more information.

Audio and Video playbackRate Support

Have you ever wanted to watch a tedious movie at double-speed? The playbackRate property permits just that (apologies for the inline code):

<video id="v" src="video.webm" controls autoplay></video>
<a href="#" onclick="document.getElementById("v").playbackRate=2;return false;">fast foward</a>

View a demonstration movie…

Improved Private Browsing

Private browsing prevents Firefox updating your history, caching pages, saving passwords and storing cookies.

While it’s been available for some time, clicking “Start Private Browsing” from the menu would close your current window and start a new session. From version 20, Firefox permits you to have any number of private and non-private windows open at a time.

Better Plugin Stability

Browser stability is largely irrelevant if your plugins cause chaos. Fortunately, the new version of Firefox detects hanging plugins and allows you to close them without restarting the browser. I doubt it will end plugin problems but it’s a step in the right direction.

Want More?

Firefox developers had a busy six weeks…

• CSS and JavaScript now load with a higher priority than images to improve response times.
• various ECMAScript 6 additions
• performance improvements
• a dozen security fixes.

I’m not sure how long Mozilla can keep up the pace of development, but other vendors should take note (seriously Google, could you only manage a spell checker in Chrome 26?!)

Once you’ve defined a great set of tags for your WordPress posts (or pages), you’ll want to display a tag cloud from somewhere in your template. This is normally achieved using the wp_tag_cloud() or wp_generate_tag_cloud() functions which do the hard work for you:

<a href="http://www.mysite.com/tag/word" class="tag-link-7" title="1 topic" style="font-size: 8pt;">word</a>
<a href="http://www.mysite.com/tag/tag" class="tag-link-5" title="2 topics" style="font-size: 14.3pt;">tag</a>
<a href="http://www.mysite.com/tag/phrase" class="tag-link-6" title="4 topics" style="font-size: 22pt;">phrase</a>
<a href="http://www.mysite.com/tag/subject" class="tag-link-4" title="1 topic" style="font-size: 8pt;">subject</a>

Perhaps you’re happy with that. I’m not…

1. Inline styles? Didn’t we abandon those in 1998?
2. The classes are pointless. I’ll probably never need to style an individual tag and, even if I do, referencing it by ID is fragile.
3. I don’t need the fully-qualified URL.

wp_tag_cloud() offers several options but I want more control! As well as addressing the points above, I’d like to assign five or six classes to tags depending on their popularity, e.g. ‘tagged1′ for the least-used tag through to ‘tagged5′ for the most used.

Let’s write a PHP function which returns a customized tag cloud. It can be placed in your theme’s functions.php file (wp-content/themes/<themename>/functions.php) or a plugin.

First, we have our function name which accepts an array of named arguments and sets defaults:

// generate tag cloud
function My_TagCloud($params = array()) {
	extract(shortcode_atts(array(
		'orderby' => 'name',		// sort by name or count
		'order' => 'ASC',		// in ASCending or DESCending order
		'number' => '',			// limit the number of tags
		'wrapper' => '',		// a tag wrapped around tag links, e.g. li
		'sizeclass' => 'tagged',	// the tag class name
		'sizemin' => 1,			// the smallest number applied to the tag class
		'sizemax' => 5			// the largest number applied to the tab class
	), $params));

We now initialize $ret, our returned HTML, and $min and $max — the minimum and maximum number of times a tag is used:

	// initialize
	$ret = '';
	$min = 9999999; $max = 0;

The WordPress get_tags() function is now called. It returns an array of tag objects:

	// fetch all WordPress tags
	$tags = get_tags(array('orderby' => $orderby, 'order' => $order, 'number' => $number));

We now need to determine the the minimum and maximum number of times a tag is used in our site. The following loop sets $min and $max accordingly:

	// get minimum and maximum number tag counts
	foreach ($tags as $tag) {
		$min = min($min, $tag->count);
		$max = max($max, $tag->count);
	}

We can now create our custom tag cloud HTML. We need to loop through all tags a second time and fetch the URL and the link title — a message indicating how many articles use that tag:

	// generate tag list
	foreach ($tags as $tag) {
		$url = get_tag_link($tag->term_id);
		$title = $tag->count . ' article' . ($tag->count == 1 ? '' : 's');

Now for the tricky bit. By default, we want to assign a class ‘tagged1′ for the least-used tag through to ‘tagged5′ for the most used (the class name and numbers can be overridden by setting sizeclass, sizemin and sizemax parameters when calling the function).

We know the minimum and maximum number of times a tag can be used so a little math can determine the class name for us. However, the equation would cause a divide by zero error if each tag was used, say, only once. In that situation, we set the class to just $sizeclass:

		if ($max > $min) {
			$class = $sizeclass . floor((($tag->count - $min) / ($max - $min)) * ($sizemax - $sizemin) + $sizemin);
		}
		else {
			$class = $sizeclass;
		}

We now have enough information to create the HTML for our single tag and end the loop:

		$ret .=
			($wrapper ? "<$wrapper>" : '') .
			"<a href=\"$url\" class=\"$class\" title=\"$title\">{$tag->name}</a>" .
			($wrapper ? "</$wrapper>" : '');
	}

Finally, we remove the blog domain URL from $ret, return the value and complete the function block:

	return str_replace(get_bloginfo('url'), '', $ret);
}

The function can be called in any theme file using My_TagCloud();. Arguments can be passed as an associative array, e.g. My_TagCloud(array('orderby'=>'count','order'=>'DESC'));. However, we could also permit content editors to add a tag cloud using a WordPress shortcode, e.g.

// enable [tagcloud] shortcode
add_shortcode('tagcloud', 'My_TagCloud');

In the following example we’ll create a tag cloud within an unordered list:

$tags = OW_Tags(array('wrapper' => 'li'));
if ($tags) {
	echo "<h2>Tags</h2>\n<ul class=\"tagcloud\">$tags</ul>\n";
}

This produces far tidier HTML code:

<h2>Tags</h2>
<ul class="tagcloud">
<li><a href="/tag/word" class="tagged1" title="1 article">word</a></li>
<li><a href="/tag/tag" class="tagged2" title="2 articles">tag</a></li>
<li><a href="/tag/phrase" class="tagged5" title="4 articles">phrase</a></li>
<li><a href="/tag/subject" class="tagged1" title="1 article">subject</a></li>
</ul>

which is easier to style and maintain CSS:

ul.tagcloud, ul.tagcloud li
{
	font-size: 1em;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.tagcloud li
{
	display: inline;
}
ul.tagcloud a
{
	text-decoration: none;
	padding: 3px 4px;
}
a.tagged1 { font-size: 0.60em; }
a.tagged2 { font-size: 0.80em; }
a.tagged3 { font-size: 1.00em; }
a.tagged4 { font-size: 1.20em; }
a.tagged5 { font-size: 1.40em; }

I hope you find it useful. Please use and adapt the code however you like in your own WordPress projects.

Tags have been supported in WordPress since version 2.3 was released in 2007. When used well, they can be a more effective form of navigation than categories or menus. But why has it never been possible to tag WordPress pages?

Fortunately, WordPress provides the tools to help us enable tags in pages and any other type of post. Beneath the surface, WordPress treats pages, posts and other content in much the same way; a page is just a custom post type. Therefore, enabling tags is simply a matter of saying “hey WordPress, I’d like to use tags on my pages and don’t forget to include them in the tag cloud!”

Let’s convert that to code you can insert into your theme’s functions.php file (wp-content/themes/<themename>/functions.php):

// add tag support to pages
function tags_support_all() {
	register_taxonomy_for_object_type('post_tag', 'page');
}
// ensure all tags are included in queries
function tags_support_query($wp_query) {
	if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
}
// tag hooks
add_action('init', 'tags_support_all');
add_action('pre_get_posts', 'tags_support_query');

Simple. If you have further custom post types which require tags, you’ll need to add register_taxonomy_for_object_type calls for each — the second argument is the type name.

Those running several WordPress sites or a network may find it easier to convert the code to a plugin so it can be enabled and disabled accordingly. In essence, that’s a matter of adding the code above to a suitably-named plugin file, i.e. wp-content/plugins/enable-tags.php, and placing comments at the top:

<?php
/*
Plugin Name: Enable Tags in WordPress Pages
Plugin URI: http://www.sitepoint.com/
Description: Enables tags in all content
Version: 1.0
Author: Craig Buckler
Author URI: http://twitter.com/craigbuckler
License: Free to use and adapt
*/
// add tag support to pages
// ... rest of code ...

I hope you find it useful. Please use and adapt the code as you like in your own projects — a link back to this article is appreciated.

Owing to my rapidly increasing age I’ve used many, many IDEs and text editors over the years. Visual Studio, Aptana, Eclipse, HomeSite, CoffeeCup, Bluefish, Komodo, Vim, Crimson, jEdit, TextPad, PSPad, ConTEXT, PHPEdit, ScITE — I’ve probably forgotten more than I remember. Most annoy me. They often miss features I want or add bloat I don’t need. My current editor of choice is Notepad++: it’s simple, lightweight and very configurable.

Historically, HTML editors have been fairly awful. Many IDEs forced you to create dumb projects, insisted on particular doctypes, or favored deprecated tags. JavaScript editing could be worse: the editor programmers didn’t understand the language so even basic features such as function lists could fail.

Fortunately, the situation has improved and NetBeans 7.3 has been released with full support for HTML5, CSS and JavaScript. The cross-platform IDE now includes an HTML project wizard which allows you to select popular boilerplate templates and JavaScript frameworks:

There’s a lightweight internal server, embedded WebKit browser, Chrome integration and responsive web design facilities:

CSS styles can be edited directly or changed within the Inspector-like rule editor:

The JavaScript editor has been rewritten to include better code completion, jQuery support and pattern recognition:

There’s also a new debugger which can analyze code running in the internal browser or Chrome. You can apply breakpoints on lines, when a DOM element changes, when events are raised and when Ajax requests are called. Very useful:

Finally, there’s a great browser log which displays exceptions, errors and warnings as they occur:

Don’t forget that NetBeans also provides first-class development facilities for PHP, Java and C/C++. If you’re into that sort of thing.

It’s great to see client side browser technologies finally receiving the tools they deserve. I’m going to give NetBeans another look … will you?

NetBeans is available for free from netbeans.org.

Opera’s WebKit announcement has divided developer opinion. Some are pleased there are fewer rendering engines to support (not that many developers actively tested Opera). Others state this is the beginning of the WebKit monoculture and IE6-like doom is upon us. The truth is somewhere in between but there are several reasons for concern.

1. WebKit != IE6, but…

WebKit is an open source rendering engine. It is not owned or controlled by a single organisation; anyone can use and modify the code. In comparison, IE (and its Trident engine) is owned by Microsoft and only available on Windows. Microsoft decision to abandon browser development could not occur in the WebKit world.

However, it’s important to remember that Apple and Google — two of the most powerful global IT companies — are in control of the most popular WebKit browsers. Apple is also responsible for handling WebKit developer agreements and either company can accept, reject or modify WebKit features to their commercial advantage. While you may be able to update the core engine, it won’t matter unless those changes eventually reach Chrome and Safari.

2. WebKit is not one engine

Some developers believe cross-browser compatibility issues will disappear if all vendors use the same engine. It would certainly make development easier, but it’s naive to think all problems would be eradicated. Test a reasonably complex design in Chrome and Safari today and you will encounter differences.

WebKit is forked and evolves along different paths. Vendors have different devices, deployment schedules and requirements. For example, Apple regularly add proprietary iOS-specific properties which may never reach the W3C or appear as recommendations.

3. WebKit is not the best engine

Those who support the monoculture argue that WebKit has won; it’s beaten Gecko and Trident. They are wrong. No engine is perfect, but you learn to forgive or avoid issues when you concentrate on a single browser.

WebKit is excellent and it was certainly the first to hit the CSS3 animation headlines. But if you think it’s ahead of all others, try using SVGs. Attempt animating pseudo elements. Use an unprefixed transform, animation or calc() function. Code using newer HTML5 form elements. Try persuading Firebug fans to abandon their favorite development tool. Don’t take my word for it — Dave Methvin of the jQuery core team and president of the jQuery Foundation states:

Each release of Chrome or Safari generates excitement about new bleeding-edge features; nobody seems to worry about the stuff that’s already (still!) broken. jQuery Core has more lines of fixes and patches for WebKit than any other browser. In general these are not recent regressions, but long-standing problems that have yet to be addressed.

When we started our jQuery 2.0 cleanup to remove IE 6/7/8 hacks, we were optimistic that we would also be able to remove some bloat from lingering patches needed for really old browsers like Safari 2. But several of those WebKit hacks still remain. It’s starting to feel like oldIE all over again, but with a different set of excuses for why nothing can be fixed.

WebKit, Gecko, Presto and Trident are all good rendering engines. They have strengths, they have weaknesses, but none is an outright winner in all areas.

4. A monoculture means and end to standards

One group of people was wholly responsible for the IE6 debacle…

web developers

IE6′s longevity was not the fault of system administrators, slow-moving organizations or an evil Microsoft. Ten years ago, developers targeted IE — not web standards. IE6 was the standard born from a monoculture; few considered a future where IE did not exist.

While there may never be a single WebKit engine, developers will choose it over W3C standards. If something works in WebKit browsers, it won’t matter whether that feature is proprietary, implemented incorrectly or fails elsewhere: it becomes the standard. At that point, you have to hope WebKit is never superseded by a better alternative — a horrible thought.

5. Competition is good

I’m saddened to see the demise of Presto but Opera made a logical business decision. Their primary market is mobile devices and Apple control the only HTML engine permitted on the iPhone and iPad. However, those restrictions do not apply to Microsoft and Mozilla. They have nothing to gain from switching to WebKit:

• If Microsoft scrapped Trident, it would affect every Windows application using web integration. It would cause chaos. I’m sure it would be technically possible to implement an API translation bridge, but how long would that take and what commercial benefit would it offer?
• Mozilla is not a commercial operation; there are no stakeholders or profit targets. The organization exists because it has Gecko, XUL and a range of related technologies. While they could switch to WebKit, it would end major projects such as Firefox OS.

Competition has been good for the web industry. A WebKit monoculture brings short-term development ease at the expense of long-term evolution and growth. Be careful what you wish for.

It may have been a short 28 days since our last look, but there have been some interesting movements in the browser chart. Here are the latest figures according to StatCounter…

Worldwide Browser Statistics January 2013 to February 2013

The following table shows browser usage movements during the past month.

Worldwide Browser Statistics February 2012 to February 2013

The following table shows browser usage movements during the past twelve months:

The tables show market share estimates for desktop browsers. The ‘change’ column is the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 9.1% of IE6 users abandoned the browser last month. There are several caveats so I recommend you read How Browser Market Share is Calculated.

Internet Explorer has fallen below 30%. Prehistoric browser usage statistics are a little hazy, but I suspect it had that total during the early days of IE4 back in 1997.

Some news which will make web developers rejoice: the combined total for IE6 and 7 has fallen below 1%. The biggest drop occurred in China where the browsers held more than 30% twelve months ago, but now hold 6%. Admittedly, 1% of the worldwide market is still a lot of people, but the figures are dropping fast and — unless you’re very unlucky — they’re no longer of any concern for you or your clients.

It’s not all gloom for Microsoft; IE10 grew by 20%. It remains the fastest growing browser but, at 1.21%, any movements are exaggerated. Interestingly, Windows 8 holds 3.16% of the OS market; we can therefore deduce that 38% of Windows 8 users have IE10 as their default. Usage trends are more complex and early adopters are likely to be predominant users of Microsoft software but IE10 is a solid browser. The recent release on Windows 7 and automated updates should increase its market share rapidly.

February’s biggest winner was Chrome. It’s growth has been relatively sedate recently so a jump of 0.56% is striking for a browser which holds almost 40% of the market.

Firefox barely moved, Safari enjoyed a small rise, and Opera also increased — its first rise in many months. Perhaps the news that Opera is switching to WebKit raised its profile.

WebKit is starting to dominate. It’s approaching a 50% share on desktops, has 56% of the mobile market and a near monopoly on smartphones and tablets. That makes me a little nervous — look out for 5 Reasons to Reject the WebKit Monoculture on SitePoint next week.

Mobile Browser Usage

Mobile usage increased a fraction to 14.35% of all web activity during February 2013.

The primary mobile browsing applications:

1. Android — 31.54% (up 0.69%)
2. iPhone — 24.36% (up 1.28%)
3. Opera Mini/Mobile – 15.40% (up 0.05%)
4. UC Browser — 8.34% (down 1.41%)
5. Nokia browser — 6.91% 7.46% (down 0.55%)

Apple’s iPhone appears has enjoyed a recent resurgence; it’s amazing that a single company holds 25% of the mobile market (well, a quarter of those using a phone to access the web). Android also continues to do well.

It’s difficult to see anyone breaking the Android/iPhone stranglehold, but perhaps Mozilla has a chance with their recently-released Firefox OS. The organization is targeting more affordable devices with lower hardware requirements and has almost 20 manufacturers on board. Firefox OS seems capable and is HTML5-based — you can even change OS styles and colors with a quick CSS update. The phones could become popular in developing countries, with school children and those unwilling to pay bloated prices.

The six-weekly Chrome and Firefox updates appear to have become synchronized to within a few days of each other. But you’d be forgiven for not noticing. That said, as well as the 22 plugged security holes, there are a number of new features in Chrome 25 which will stir the juices of developers everywhere…

The web speech API

Do you have a feeling of déjà vu? I’m not surprised — Webkit added speech recognition almost two years ago and it appeared in Chrome 11. However, it was fairly basic and did not implement the W3C speech API. This provides far more control so you can react to speech events and process the phrases accordingly, e.g.

if (webkitSpeechRecognition) {
	var recognition = new webkitSpeechRecognition();
	recognition.continuous = true;
	recognition.interimResults = true;
	// speech events
	recognition.onstart = function() { ... };
	recognition.onresult = function(event) { ... };
	recognition.onerror = function(event) { ... };
	recognition.onend = function() { ... };
}

Google has created a demonstration page which illustrates a basic text entry box, but expect to see voice-driven techniques used to control web applications and games soon. For more information, refer to the W3C speech API specification and an introduction tutorial at HTML5Rocks.

Evil Extension Eradication

Do you have Chrome extensions you don’t remember installing? Google helpfully provides facilities and documentation which allowed anyone to silently install an extension without your consent. This nasty behavior has been removed in Chrome 25 and the browser now implements Firefox-like add-on detection.

CSS Media Override

You can now emulate different media devices in Developer Tools — click the Settings cog, followed by Overrides. The facility allows you to test print and other stylesheets without needing to change code, using Print Preview or other convoluted methods:

While you’re in developer tools, try using the new console.clear() method to clean the log.

Windows App Launcher

Google has ported this Chrome OS feature to Windows. The launcher is experimental and must be enabled by setting Show Chrome Apps Launcher in chrome://flags/. Restart Chrome and you’ll have a new — and fairly ugly — icon in the taskbar:

I’m not totally convinced by the App Launcher; it’s just as easy to start Chrome and select an icon from the apps screen. Someone, somewhere will like it, though.

Full History Sync

It’s now possible to synchronize your entire browsing history between devices rather than just the URLs entered in the address bar. It’s another experimental feature — set Enable full history sync in chrome://flags/.

Chrome’s come a long way and it’s difficult to believe the browser is less than five years old. There are some nice new features in version 25, but a number of dubious additions have sneaked in. Keep it clean, Google!

Another six weeks has passed so it’s time for a new Firefox release. Version 19 appeared on February 19, 2013. If it hasn’t automagically installed, look at Help > About Firefox or head over to getfirefox.com. Let’s take a journey through the new features…

Native PDF Viewer

I never quite understood the necessity for native PDF viewing. Plugins can be slow, unstable and unavailable on some platforms, but I generally download or avoid PDF documents where possible. That said, Mozilla has made a great job of the built-in viewer. It’s faster than Adobe’s rendering and converts documents to HTML5 which you can inspect (not that you’ll want to — it’s a mess).

CSS3 Viewport Percentage Support

Firefox 19 now supports the new vh, vw, vmin and vmax elements. Refer to The New CSS3 Relative Font Sizing Units for more details.

The units now have full support in Firefox, Chrome, Safari and IE10 with partial support in IE9. Opera’s recent switch to WebKit will inevitably include the feature.

@page Support for Printed Documents

@page allows you to target the margins or page breaks of printed pages, e.g.

@page
{
	margin: 30mm 50mm;
}

Note that @page can be followed by :first, :left or :right to target specific pages, but that has not been implemented in Firefox yet.

Export canvas Content to an Image

The generated graphical content of a canvas element can now be exported to an image blob using the toBlob method:

toBlob(callback [, imagetype]);

The export occurs asynchronously so it requires a callback function to handle the resulting image. By default, images are exported to lossless 24-bit PNG but you can specify JPG if necessary, e.g.

// JPEG at 90% quality
toBlob(callback, "image/jpeg", 0.9);

This simple example copies the canvas to a new image element on the page:

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
	var newImg = document.createElement("img"),
		url = URL.createObjectURL(blob);
	newImg.onload = function() {
		// revoke blob after use
		URL.revokeObjectURL(url);
	};
	newImg.src = url;
	document.body.appendChild(newImg);
});

Updated Developer Tools

While it’s difficult to out-do Firebug, Mozilla has added a range of great developer tools to Firefox. The JavaScript debugger now permits pausing on exceptions and you can hide non-enumerable properties. In addition, CSS links in the Web Console now open in the Style Editor.

An experimental remote web console has also been added which can connect to Firefox Mobile on Android or Firefox OS. It must be enabled in about:config — set devtools.debugger.remote-enabled to true.

Miscellaneous Improvements

There are a number of smaller updates under the hood:

• faster start-up performance
• theme support is back
• the CSS calc() function can now be used in gradient color-stops.
• support for text-transform: full-width which is mainly of use for Asian character sets
• The canvas isPointInStroke method tests whether a point lies inside the filled and stroked area of a path.
• CSS page-break-inside support to control breaks in printed documents
• CSS Flexbox has been unprefixed but remains disabled by default
• XForms has been removed, but you weren’t using it anyway.
• the minimum CPU requirement has been lowered to 600MHz, and
• several hundred bugs have been eliminated

Firefox has been losing ground to Chrome but the browser is more than a match for Google’s offering. It certainly works well on Windows but is anyone still having trouble on Mac or Linux?