1. ReCSS
ReCSS makes testing out CSS hacks easy. When you alter your CSS in an editor and save the new stylesheet, you have to reload the entire page in your browser to see the effect of the changes. Sure, you can make the edits in Firebug, but Firebug’s inbuilt editor isn’t great for much beyond the slight tweak. With AJAX-powered pages and dynamic state, reloading the page isn’t quite as simple as it sounds.

Enter ReCSS: this handy little bookmarklet will keep your existing page entirely intact, but reload all the CSS sheets. You may see a brief flash of white in your browser as current styles are removed, before your page renders almost immediately with the latest set of CSS rules. Check out the project page.

2. Layout Grid Bookmarklet
Working out pixels and laying out a page is tricky, especially when working from detailed Photoshop mockups and sketches. After some suggestions from the community about using a background image of a grid for layout, Andy Budd created the Layout Grid Bookmarklet, which creates a drawing-paper style grid against the background of your page to generally measure elements with. Check out his blog post about it and the Layout Grid Bookmarklet.

3. XRAY
X-RAY is a great Firebug/Safari/IE Dev-bar style inspector for web pages. It features a simple point-and-click interface, revealing some basic CSS properties and inheritance hierarchy of the selected element, as well as outlining it and displaying dimensions details. The actual interface is quite slick, and hides away neatly when you no longer want it. If you aren’t at your preferred Firebug-equipped machine, XRAY is definitely something to have on hand. Check out the project page and the XRAY bookmarklet.

4. Aardvark
Aardvark is similar to XRAY, but provides a lot more functionality for traversing the DOM visually. Ever wanted to pick a particular element, then see what happens if you move up n levels, go to the next node across, or even dive in and start editing innerHTML there and then? Aardvark provides a point-and-click interface similar to XRAY, and then a set of keyboard shortcuts for moving around, focusing on finding what you need. Aardvark is actually available as a Firefox extension, although the bookmarklet is quite convenient. Head to the project page and try the Aardvark bookmarklet.

5. Slayeroffice Favelet Suite
We’ve saved the best till last – this favelet suite will blow you away. It features everything from DOM charts to mouseover inspectors, color lists to font resizers, rulers and even a hidden field modifier. All in all, this collection of 15 utilities all in the one bookmarklet is a must for any front-end web development. While it was last revised in 2004, it in many ways offers far more functionality than Firebug, with far more detail provided by its various tools. When you’ve finished with it it, just hit escape to quietly hide it away. Head to the project page and grab the Favelet suite.

Wordpress is a CMS that was built for blogging but many people have repurposed it for magazines, newspapers, blog networks and all sorts of other goodies! But did you know you can hack your Wordpress blog to be a no-cost solution for a social network? Well you can, and here’s fifteen plug-ins that will let you do it.

1. WP-Gravatar
Install WP-Gravatar for adding ‘faces’ to your members and your writers. This plugin lets you use Gravatar, MyBlogLog, OpenAvatar, Wavatar, Identicon, monsterID or Favico.ico files with your comments. Gives you a Widget with your profile info and your gravatar. Let’s you set your own CSS style to use with the Comments section and the author about box.

2. Ajaxed Wordpress
A highly customizable plugin to add AJAX to your blog. AWP uses AJAX to load posts inline, paginate posts, load and submit comments, and more. For that Web 2.0 look and feel.

3. Members Only
A WordPress plugin that allows you to make your WordPress blog only viewable to visitors that are logged in. This is good for protecting your user’s data and your blog content.

4. Profiles
Profiles allows the easy display and management of personal profiles / biographies, or any other similarly periodic information. In particular, it adds a “profiles” tab to the management section and allows you to easily edit information about the profiles as well as associate an image (with optional watermark) with each profile.

5. WP Super Cache
A very fast caching engine for WordPress that produces static html files. When your network does start to receive high levels of traffic, you’ll need this to prevent your site from going down.

6. Post-Plugin Library
Makes calling Similar posts, Recent Posts, Random Posts and Recent Comments easier.

7. Exec PHP
This plug-in is a godsend! It allows you to add PHP markup to wordpress pages and posts. This will give you even greater control over how wordpress looks and acts, allowing you customize with no restriction.

8. Quick SMS
This will allow visitors to send SMS messages to blog owners. It would be ideal for a WordpressMU network as it would allow everyone to stay in constant contact with each other. Could also be hacked to create a “twitter”-like service for all members.

9. UMapper
UMapper plugin is universal mapping platform, which makes it a snap to create engaging maps and add them to your blog posts. Microsoft Virtual Earth, Google Maps, OpenStreet – all are supported by this truly universal (hence the name UMapper – Universal Mapper) plugin.

10. Invite Friends
This plugins main goal was to provide the ability to any of your registered users, to invite more people to the community.

11. NextGen Gallery
Very customizable Gallery option for Wordpress. Turn your blog into a mini ‘Flickr’!

12. Popup Scheduler
If used correctly, a popup is always the best way to achieve great results (be it in sales or subscription rate). It is also the best tool to grab your readers attention. This plugin allow you to customize and schedule a popup to show according to various situation. 1) You can schedule a popup to show a welcome message whenever a new visitor arrives at your site 2) You can schedule a popup to show on the readers returned visit to thank them for reading your blog and invite them to subscribe to your feed/email update. 3) If there is any major changes to your website, you can show a popup to inform your readers of the changes 4) If you are selling products on your blog, you can schedule a popup whenever you have a new product launch 5) During a campaign (such as charity donation drive, blogathon etc), you can schedule a popup to show for a number of days to increase the awareness of the campaign. and many more…

13. SABRE
Sabre is an acronym for Simple Anti Bot Registration Engine. It’s a set of counter measures against spam registration on your blog.

14. Dashboard Editor
This plugin allows you to add whatever you want to the Wordpress dashboard through PHP and HTML even Sidebar Widgets. You can also wipe the entire dashboard or individually remove some of the more irritating sections like the Dev news, Planet Wordpress and the getting started section. This allows for the creation of custom designs for the back end to hide the fact that you’re even using Wordpress!

15. SezWho
SezWho is a distributed context, rating and reputation system for social media sites like blogs, forums, wikis, video/picture sharing sites, discussion boards and anywhere else where people collaborate on the web.

SimpleTest is a PHP unit testing and web testing framework along the lines of JUnit and JWebUnit. It provides a comprehensive set of APIs for testing everything from your class methods to your SSL-secured authentication pages.

Unit testing in PHP generally validates that individual sections of your source code are functioning as expected. As your project grows, it’s hard to remember what each and every module is responsible for, especially with multiple developers. Unit tests help check that a function or method does what it’s meant to, and when run during a build process or around version control commits, can check that recent changes haven’t broken expected functionality.

Let’s look at a simple SimpleTest example:

<?php
define('SIMPLE_TEST', 'simpletest/');
 
require_once(SIMPLE_TEST . 'autorun.php');
require_once('arithmetic_class.php');
 
class TestOfArithmetic extends UnitTestCase {
    function TestOfArithmetic() {
        $this->UnitTestCase('Test of Arithmetic');
    }
 
    function testAddition() {
        $arithmetic = new Arithmetic();
        $result = $arithmetic->add(1,1);
        $this->assertEqual($result, 2);
    }
}
?>

SimpleTest provides PHP classes that serve as the ground work for unit testing. When we define a new unit test case – in this case, “TestOfArithmetic”, SimpleTest automatically works out what tests you’ve defined in order to run them. We then simple create new methods for our tests, run whatever logic we need, and use assert calls to check that we have achieved our expected outcome. In this case, we want to assert that the return value of Arithmetic::add(1, 1) equals 2.

This may seem rather lengthy for a single test, but additional tests can be added on in as little as a single line of code, and an entire application can be quickly checked for reliability with just a few hundred lines of unit tests. Once this is in place, we can run our unit tests by loading up this script in our browser, and if everything is in order, we see a nice and concise status page displaying the results of the tests.

Of course, why write tests after you write your application code, when you could write it sooner and sooner, and maybe even before? That’s the approach of test driven development (TDD) – SimpleTest is perfectly happy with writing tests for code that doesn’t exist yet. TDD, from one of the guys who created Extreme Programming (XP), basically involves writing tests to define the design of code, and then working away at the code till it passes the tests, and SimpleTest is a great way to achieve it in PHP.

SimpleTest is hosted on SourceForge, so head over and try it out. They’ve also got a great tutorial on their main project site.

This is an example how to search your blog as a query in Google. But have you ever wanted to learn how to make your own ‘Search Tools’ for Firefox so that you can look-up information on your own blog quickly, from anywhere on the internet? Or do you want to hack Google Custom search to improve your earnings and it’s functionality?

It turns out making a search tool is relatively simple. In fact using this tool, you can make one in about five minutes. The trick is to figure out what a search query on your blog looks like. For Wordpress users, it might look like this:

http://yourblog.com/blog/?s=news&search=Search

This is important because you’ll notice the form asks you for a front of search term and a back of search term. The query itself should be left out so that your users can enter whatever they want. Let’s dissect the search query….

FRONT
http://yourblog.com/blog/?s=

QUERY
news

BACK
&search=Search

Your own search queries may look a bit different than this depending upon the software you use. To get the query preform a search using the GUI and then copy and paste the query from the navigation bar.

If you’re using Google custom search, you’ll notice that the query looks very different. This is because they use identifiers to keep track of revenues earned from custom search. Now, I have no idea if hacking their custom code is a violation of TOS but I’ve done it, it works but since it’s questionable I can’t flat out explain what to do here. Instead, we’ll create one using the Wordpress specific query….

Ready.to then creates the XML file needed to add custom search to your top navigation bar. You can see where it puts the tool below:

Notice that I now have custom search option added to my Firefox Toolbar. That’s great, you’ve got an XML file, however if you upload the file to your blog and link to it, Firefox won’t know to execute the script. To do that you need to add a bit of javascript code to the header of your site and use another custom query for linking.

<script type="text/javascript">
<!--
function addp(csurl) {
try {
window.external.AddSearchProvider(csurl);
} catch (e) {
alert("You need to use Internet Explorer (7.0 or later)
or Firefox (2.0 or later) to install the OpenSearch plug-in.");
}}
//-->
</SCRIPT>

That script tells the browser what to do with the .xml file. Now we need to tell Firefox where to find it, and that it’s an executable and not just a linked file. We do this with the addp request defined in the header script…


<a href="#" onClick="addp("http://developertutorials.com/blog/DevTut.xml");">

This tells the browser that the file is executable, the script tells FireFox what to do with that executable (add it to the toolbar).

That’s it, if everything went well you’ve created a custom search tool for Firefox in about five minutes. You can get the Developer Tutorial Firefox Search Tool here.

The Selenium project provides a set of tools to handle the testing of web applications. Selenium itself is simply a portable software testing framework, where the tests can be written in HTML or a programming/scripting language. The difference with Selenium is that tests are run directly within a web browser, “just like real users do.”

As a result, Selenium are very much oriented towards client-side results. For example, one of the simplest tests you can run in Selenium is loading a URL and checking if a certain snippet of text is or isn’t on the page. Selenium offers a number of applications built around the same standard, but we’re interested in Selenium IDE, a Firefox extension that allows tests to be developed and run from within Firefox with no additional software installation.

To get started with Selenium, just head over to the addon page to download Selenium IDE. Once you’ve installed it, restart Firefox and find Selenium in your Tools menu. Load it up, and find an application you want to practice on – one of your pet projects, maybe, or a website you frequently visit. Because Selenium runs on top of a standard web browser, it doesn’t care what you test, as long as it has HTML to work with.

The moment you start Selenium IDE, it starts recording commands. Selenium testing is composed of “test suites”, of which you may have one per application. Each suite includes cases, one of which has been created already and helpfully titled “Untitled”, and each cases consists of a series of commands to be executed in succession. When you start navigating around the current page, Selenium IDE will add those navigation procedures to the current test case, so that they can be replayed at a later stage. Start by clicking on a link; you’ll see a “clickAndWait” appear in the table panel of your Selenium window.

To create your Selenium tests, you can simply navigate around your website while recording. Selenium records everything from clicking links to entering data in input fields and submitting forms. To stop recording, hit the red circle in the top-right. At a basic level, this tests that your pages are being served correctly. You can then add in commands within the table – I suggest starting with “verifyTextPresent” to check if a snippet of text is found within the page (expressions allowed).

Once you’re finished, your test window might look something like this:

To run your tests, just hit the green play buttons – you may need to slow down Selenium to wait for pages to load if you’re running tests over the internet. Remember that some of Selenium’s tests are based on the DOM, and will fail if the DOM hasn’t loaded yet even if the application is running fine.

To save your tests to run them later, just use the File menu. In future posts, we’ll look at more complex use of Selenium and the multitude of custom commands available. In the meantime, why not subscribe to our RSS feed?

PHP 5 supports most of the legacy syntax features of PHP 4. Most code written for PHP 4 should function fine under PHP 5, and a comprehensive test suite could check this. However, many of the backwards-incompatible changes in PHP 5 were in regard to language quirks, and quite a few hacks rely on these in order to function. Here are some issues to watch out for:

• Class names provided by language features – get_class(), get_parent_class() and get_class_methods() now return the name of the classes/methods exactly as declared; earlier, they were lowercased first
• The new object model is quite different – an empty object is no longer considered “empty” by empty(), among other changes
• Files with functions cannot be included twice; PHP 5 throws an error as the function is being redeclared
• Illegal uses of string offsets (e.g. $somestring[0]) will throw an error
• On Windows servers, the include/require_once functions are case insensitive – “SomeFile.php” and “somefile.php” will only be included once

Legacy applications making use of the CLI, especially under Windows, should be aware of the new names for binaries. The CGI binary has been renamed to php-cgi (previously php), while the CLI binary has been moved back into the main directory as php. Other applications calling PHP scripts may also want to look at php-win on Windows, which serves the same function as the CLI except without the black “DOS box”.

Finally, there are some new reserved keywords. If you are upgrading straight to PHP 5.3, watch out for the new namespace keywords, including “namespace”, “use” and __NAMESPACE__. The new OOP features introduce quite a few keywords popular in enterprise applications – “public”, “private”, “protected”, “clone”, “try” and “this” come to mind (more available here). Error checking every file (run “php -l /path/to/file.php”) can pick these up fair quickly.

PHP 4 has been discontinued for some time; indeed, the latest release, 4.4.8, is from early January. Major legacy applications should be ported as quickly as possible to avoid security issues; existing code should be thoroughly checked for syntax and language feature changes as well. The PHP manual has some handy documentation on migrating, and the PHP 5 features are clearly noted all around the manual – check the revision history of functions as well.

jGrowl integrates cleanly into jQuery, offering a simple API for displaying messages. By default, the message is displayed in an elegant black box for a few seconds, with a close button for the user to hide it manually. However, as expected of a jQuery API, the plugin also has a wealth of options to configure its behaviour, accepting parameters in JSON format.

Each message can be configured to be “stickied” – that is, to remain in place until dismissed by the user. New messages can also be added to the beginning of the stack, as opposed to the end, in a case where one or more jGrowl messages may already be visible. A number of options for configuring visual appearance are available, and jGrowl can use a specified CSS class as well, giving the developer full control over the final display. Message transitions are animated, and the animation effect can also be configured.

The API also features a number of powerful hooks, providing events on which user-defined functions can be fired – also passed in through the JSON configurations. For example, functions can be fired before and on opening and closing each message, as well as during the open animation and close animation.

Two versions are available, one recommended for jQuery 1.0.x, the other for jQuery 1.2.x, so jGrowl should be compatible with your existing jQuery-powered application. The standard download includes extensive samples, and it’s very easy to get started. Head over to the project page, or the jQuery plugin page for further details.

Fiddler is actually a tool provided by a Microsoft employee, although works seamlessly with any browser. It requires the .net framework, and so is most likely a Windows-only application, although it may be run on Mono. When Fiddler is running, IE requests are automatically routed through it, and it runs a local transparent proxy server on port 8888. Firefox and other browsers can then be configured to route their requests through Fiddler. (I use SwitchProxy for added simplicity.)

As each HTTP request comes through, Fiddler offers a wealth of options for analysing the request:

The inbuilt request builder enables you to use a past request as a template to send a new HTTP request manually. Fiddler can even autorespond to requests to the proxy, and expose the proxy to clients on the local network. The application also includes a number of other handy tools, including an authentication mechanism. Fiddler’s rules-based proxy system is even scriptable (C#), and a mini-editor with syntax highlighting and reference is available for constructing rule scripts.

Fiddler is an invaluable tool for analysing problems with a web application where HTTP may be an issue, as well as generally observing the movement of a client through the application. It overcomes HTTP’s statelessness with its session-based approach, and integrates well with other tools. It’s also a very convenient HTTP proxy. To get started, just head over to the project page.

If you have an Apache installation locally, you’ve probably got ab already. Check your path – just run `ab`. Otherwise, head to your apache/bin folder. If you’re running Windows and don’t have Apache, grab a copy of XAMPP Lite from the project page.

The ab executable is independent of Apache, and doesn’t actually care if it’s testing an Apache installation – ab will load test Apache web servers, LigHTTPD servers, anything that speaks HTTP. Still, ab will give the most accurate results when run without latency on a local server, and you probably don’t want to load-test on a production server. Given this, it’s best to setup Apache and your application locally as a staging server, then load test it with ab.

Work out the path to your ab executable – for example, mine’s D:\dev\apache\bin\ab.exe – and open up a command line window to run it.

D:\dev\apache\bin\>ab
ab: wrong number of arguments
Usage: ab [options] [http[s]://]hostname[:port]/path
Options are:
    -n requests     Number of requests to perform
    -c concurrency  Number of multiple requests to make
    -t timelimit    Seconds to max. wait for responses
    -p postfile     File containing data to POST
    -T content-type Content-type header for POSTing
    -v verbosity    How much troubleshooting info to print
    -w              Print out results in HTML tables
    -i              Use HEAD instead of GET
    -x attributes   String to insert as table attributes
    -y attributes   String to insert as tr attributes
    -z attributes   String to insert as td or th attributes
    -C attribute    Add cookie, eg. 'Apache=1234. (repeatable)
    -H attribute    Add Arbitrary header line, eg. 'Accept-Encoding: gzip'
                    Inserted after all normal header lines. (repeatable)
    -A attribute    Add Basic WWW Authentication, the attributes
                    are a colon separated username and password.
    -P attribute    Add Basic Proxy Authentication, the attributes
                    are a colon separated username and password.
    -X proxy:port   Proxyserver and port number to use
    -V              Print version number and exit
    -k              Use HTTP KeepAlive feature
    -d              Do not show percentiles served table.
    -S              Do not show confidence estimators and warnings.
    -g filename     Output collected data to gnuplot format file.
    -e filename     Output CSV file with percentages served
    -h              Display usage information (this message)
    -Z ciphersuite  Specify SSL/TLS cipher suite (See openssl ciphers)
    -f protocol     Specify SSL/TLS protocol (SSL2, SSL3, TLS1, or ALL)

Calling ab without arguments will display this list of options. We are primarily interested in -n and -c. The -n switch represents the number of requests to perform – a figure in the low thousands is generally appropriate for a web application. The -c switch represents concurrency, or how many requests to make at the same time. This value can vary depending on what you expect for your application.

Work out a URL to an average page of your web application. For example, I’m load testing a local CakePHP application, so my URL is http://cake.local/users/list. Call ab as follows:

ab -n 1000 -c 10 http://cake.local/users/list

If you need to use a proxy (e.g. for testing remote servers), use the -X switch, in the format -X proxyhost:proxyport e.g. -X proxy.local:3128.

After displaying some status reports every 100 requests or so, it will print out a fairly detailed report, including document length, bytes transferred, completed and failed requests, requests per second and some statistics on connection times.

For further information, check out the documentation page for ab.

Flot

Flot is entirely client-side, powered by jQuery and using HTML <canvas> (or the excanvas library for emulating IE support). The demos provided are quite comprehensive, and the API is simple yet powerful. Being pure-Javascript, it’s also fully portable to projects where server-side scripting is unavailable (e.g. Adobe AIR). Flot-drawn charts are attractive out of the box, although everything can be configured. Zooming functionality is also included.

Open Flash Chart

Open Flash Chart, a Flash-based chart system (no surprises here), features a very powerful API, possibly more so than most other options (including commercial offerings!). It has an interesting approach to chart generation – it fetches chart data from the server; the object makes a seperate HTTP request to fetch the dataset.

Plotkit

Plotkit is another JavaScript-based charting solution using <canvas>. It also supports SVG thanks to Adobe SVG (given browser support, of course) – SVG graphs scale beautifully with Firefox 3’s image-resizing on the fly for client-side zooming. It uses Mochikit 1.3+, and excanvas for IE6 support.

Flotr

Flotr, inspired by Flot (see above), is a simple JavaScript charting library built on Prototype. Flotr focuses on drawing appealing graphs with simple syntax; the snippets for its examples are generally a little leaner than those of the other JS libraries. Flotr comes with fairly thorough documentation available online, to help you get up and running quickly.

Honorable mention: PHP/SWF charts

PHP/SWF charts isn’t entirely open source, but I’ve included it with an honourable mention given its popularity. It offers a free version, with almost all the features of the commercial offering ($45/domain). With PHP bindings, it’s possibly the easiest to get started with if you already use PHP in your application, and its sister project XML/SWF charts happily takes any other server-side language. It also has the most visually appealing demo charts.