/****************************************************************
FILE: RegExpValidate.js
....
/*** a new dom object ***/
$dom = new domDocument;
/*** load the html into the object ***/
$dom->loadHTML($html);
/*** discard white space ***/
$dom->preserveWhiteSpace = false;
/*** the table by its tag name ***/
$tables = $dom->getElementsByTagName('table');
/*** get all rows from the table ***/
$rows = $tables->item(0)->getElementsByTagName('tr');
/*** loop over the table rows ***/
foreach ($rows as $row)
{
/*** get each column by tag name ***/
$cols = $row->getElementsByTagName('td');
/*** echo the values ***/
echo $cols->item(0)->nodeValue.'
';
echo $cols->item(1)->nodeValue.'
';
echo $cols->item(2)->nodeValue;
echo '
';
}
Testing is not closely integrated with development. This prevents you from measuring the progress of development- you can't tell when something starts working or when something stops working. Using JUnit you can cheaply and incrementally build a test suite that will help you measure your progress, spot unintended side effects, and focus your development efforts.
Programmers burn out from just such cycles. Breaking out requires an outside influence. We found the outside influence we needed in a simple testing framework that lets us do a little testing that makes a big difference.
The best way to convince you of the value of writing your own tests would be to sit down with you and do a bit of development. Along the way, we would encounter new bugs, catch them with tests, fix them, have them come back, fix them again, and so on. You would see the value of the immediate feedback you get from writing and saving and rerunning your own unit tests.
Unfortunately, this is an article, not an office overlooking charming old-town Zürich, with the bustle of medieval commerce outside and the thump of techno from the record store downstairs, so we'll have to simulate the process of development. We'll write a simple program and its tests, and show you the results of running the tests. This way you can get a feel for the process we use and advocate without having to pay for our presence.
The program we write will solve the problem of representing arithmetic with multiple currencies. Arithmetic between single currencies is trivial, you can just add the two amounts. Simple numbers suffice. You can ignore the presence of currencies altogether.
Things get more interesting once multiple currencies are involved. You cannot just convert one currency into another for doing arithmetic since there is no single conversion rate- you may need to compare the value of a portfolio at yesterday's rate and today's rate.
Let's start simple and define a class Money to represent a value in a single currency. We represent the amount by a simple int. To get full accuracy you would probably use double or java.math.BigDecimal to store arbitrary-precision signed decimal numbers. We represent a currency as a string holding the ISO three letter abbreviation (USD, CHF, etc.). In more complex implementations, currency might deserve its own object.
class Money {
private int fAmount;
private String fCurrency;
public Money(int amount, String currency) {
fAmount= amount;
fCurrency= currency;
}
public int amount() {
return fAmount;
}
public String currency() {
return fCurrency;
}
} When you add two Moneys of the same currency, the resulting Money has as its amount the sum of the other two amounts. public Money add(Money m) {Now, instead of just coding on, we want to get immediate feedback and practice "code a little, test a little, code a little, test a little". To implement our tests we use the JUnit framework. To write tests you need to get the latest copy JUnit (or write your own equivalent- it's not so much work).
return new Money(amount()+m.amount(), currency());
}
JUnit defines how to structure your test cases and provides the tools to run them. You implement a test in a subclass of TestCase. To test our Money implementation we therefore define MoneyTest as a subclass of TestCase. In Java, classes are contained in packages and we have to decide where to put MoneyTest. Our current practice is to put MoneyTest in the same package as the classes under test. In this way a test case has access to the package private methods. We add a test method testSimpleAdd, that will exercise the simple version of Money.add() above. A JUnit test method is an ordinary method without any parameters.
public class MoneyTest extends TestCase {The testSimpleAdd() test case consists of:
//…
public void testSimpleAdd() {
Money m12CHF= new Money(12, "CHF"); // (1)
Money m14CHF= new Money(14, "CHF");
Money expected= new Money(26, "CHF");
Money result= m12CHF.add(m14CHF); // (2)
Assert.assertTrue(expected.equals(result)); // (3)
}
}
public void testEquals() {
Money m12CHF= new Money(12, "CHF");
Money m14CHF= new Money(14, "CHF");
Assert.assertTrue(!m12CHF.equals(null));
Assert.assertEquals(m12CHF, m12CHF);
Assert.assertEquals(m12CHF, new Money(12, "CHF")); // (1)
Assert.assertTrue(!m12CHF.equals(m14CHF));
} The equals method in Object returns true when both objects are the same. However, Money is a value object. Two Monies are considered equal if they have the same currency and value. To test this property we have added a test (1) to verify that Monies are equal when they have the same value but are not the same object. Next let's write the equals method in Money:
public boolean equals(Object anObject) {
if (anObject instanceof Money) {
Money aMoney= (Money)anObject;
return aMoney.currency().equals(currency())
&& amount() == aMoney.amount();
}
return false;
} Since equals can receive any kind of object as its argument we first have to check its type before we cast it as a Money. As an aside, it is a recommended practice to also override the method hashCode whenever you override method equals. However, we want to get back to our test case. With an equals method in hand we can verify the outcome of testSimpleAdd. In JUnit you do so by a calling Assert.assertTrue, which triggers a failure that is recorded by JUnit when the argument isn't true. Since assertions for equality are very common, there is also an Assert.assertEquals convenience method. In addition to testing for equality with equals, it reports the printed value of the two objects in the case they differ. This lets us immediately see why a test failed in a JUnit test result report. The value a string representation created by the toString converter method. There are other asertXXXX variants not discussed here.
Now that we have implemented two test cases we notice some code duplication for setting-up the tests. It would be nice to reuse some of this test set-up code. In other words, we would like to have a common fixture for running the tests. With JUnit you can do so by storing the fixture's objects in instance variables of your TestCase subclass and initialize them by overridding the setUp method. The symmetric operation to setUp is tearDown which you can override to clean up the test fixture at the end of a test. Each test runs in its own fixture and JUnit calls setUp and tearDown for each test so that there can be no side effects among test runs.
public class MoneyTest extends TestCase {
private Money f12CHF;
private Money f14CHF;
protected void setUp() {
f12CHF= new Money(12, "CHF");
f14CHF= new Money(14, "CHF");
}
} We can rewrite the two test case methods, removing the common setup code: public void testEquals() {
Assert.assertTrue(!f12CHF.equals(null));
Assert.assertEquals(f12CHF, f12CHF);
Assert.assertEquals(f12CHF, new Money(12, "CHF"));
Assert.assertTrue(!f12CHF.equals(f14CHF));
}
public void testSimpleAdd() {
Money expected= new Money(26, "CHF");
Money result= f12CHF.add(f14CHF);
Assert.assertTrue(expected.equals(result));
} Two additional steps are needed to run the two test cases: TestCase test= new MoneyTest("simple add") {
public void runTest() {
testSimpleAdd();
}
}; A template method[1] in the superclass will make sure runTest is executed when the time comes. The dynamic way to create a test case to be run uses reflection to implement runTest. It assumes the name of the test is the name of the test case method to invoke. It dynamically finds and invokes the test method. To invoke the testSimpleAdd test we therefore construct a MoneyTest as shown below:
TestCase test= new MoneyTest("testSimpleAdd"); The dynamic way is more compact to write but it is less static type safe. An error in the name of the test case goes unnoticed until you run it and get a NoSuchMethodException. Since both approaches have advantages, we decided to leave the choice of which to use up to you. As the last step to getting both test cases to run together, we have to define a test suite. In JUnit this requires the definition of a static method called suite. The suite method is like a main method that is specialized to run tests. Inside suite you add the tests to be run to a TestSuite object and return it. A TestSuite can run a collection of tests. TestSuite and TestCase both implement an interface called Test which defines the methods to run a test. This enables the creation of test suites by composing arbitrary TestCases and TestSuites. In short TestSuite is a Composite [1]. The code below illustrates the creation of a test suite with the dynamic way to run a test.
public static Test suite() {
TestSuite suite= new TestSuite();
suite.addTest(new MoneyTest("testEquals"));
suite.addTest(new MoneyTest("testSimpleAdd"));
return suite;
} Since JUnit 2.0 there is an even simpler dynamic way. You only pass the class with the tests to a TestSuite and it extracts the test methods automatically. public static Test suite() {
return new TestSuite(MoneyTest.class);
}
Here is the corresponding code using the static way.
public static Test suite() {
TestSuite suite= new TestSuite();
suite.addTest(
new MoneyTest("money equals") {
protected void runTest() { testEquals(); }
}
);
suite.addTest(
new MoneyTest("simple add") {
protected void runTest() { testSimpleAdd(); }
}
);
return suite;
} Now we are ready to run our tests. JUnit comes with a graphical interface to run tests. Type the name of your test class in the field at the top of the window. Press the Run button. While the test is run JUnit shows its progress with a progress bar below the input field. The bar is initially green but turns into red as soon as there is an unsuccessful test. Failed tests are shown in a list at the bottom. Figure 1 shows the TestRunner window after we run our trivial test suite. 
After having verified that the simple currency case works we move on to multiple currencies. As mentioned above the problem of mixed currency arithmetic is that there isn't a single exchange rate. To avoid this problem we introduce a MoneyBag which defers exchange rate conversions. For example adding 12 Swiss Francs to 14 US Dollars is represented as a bag containing the two Monies 12 CHF and 14 USD. Adding another 10 Swiss francs gives a bag with 22 CHF and 14 USD. We can later evaluate a MoneyBag with different exchange rates.
A MoneyBag is represented as a list of Monies and provides different constructors to create a MoneyBag. Note, that the constructors are package private since MoneyBags are created behind the scenes when doing currency arithmetic.
class MoneyBag {
private Vector fMonies= new Vector();
MoneyBag(Money m1, Money m2) {
appendMoney(m1);
appendMoney(m2);
}
MoneyBag(Money bag[]) {
for (int i= 0; i < bag.length; i++)
appendMoney(bag[i]);
}
} The method appendMoney is an internal helper method that adds a Money to the list of Moneys and takes care of consolidating Monies with the same currency. MoneyBag also needs an equals method together with a corresponding test. We skip the implementation of equals and only show the testBagEquals method. In a first step we extend the fixture to include two MoneyBags. protected void setUp() {
f12CHF= new Money(12, "CHF");
f14CHF= new Money(14, "CHF");
f7USD= new Money( 7, "USD");
f21USD= new Money(21, "USD");
fMB1= new MoneyBag(f12CHF, f7USD);
fMB2= new MoneyBag(f14CHF, f21USD);
} With this fixture the testBagEquals test case becomes: public void testBagEquals() {
Assert.assertTrue(!fMB1.equals(null));
Assert.assertEquals(fMB1, fMB1);
Assert.assertTrue(!fMB1.equals(f12CHF));
Assert.assertTrue(!f12CHF.equals(fMB1));
Assert.assertTrue(!fMB1.equals(fMB2));
} Following "code a little, test a little" we run our extended test with JUnit and verify that we are still doing fine. With MoneyBag in hand, we can now fix the add method in Money. public Money add(Money m) {
if (m.currency().equals(currency()) )
return new Money(amount()+m.amount(), currency());
return new MoneyBag(this, m);
} As defined above this method will not compile since it expects a Money and not a MoneyBag as its return value. With the introduction of MoneyBag there are now two representations for Moneys which we would like to hide from the client code. To do so we introduce an interface IMoney that both representations implement. Here is the IMoney interface: interface IMoney {
public abstract IMoney add(IMoney aMoney);
//…
} To fully hide the different representations from the client we have to support arithmetic between all combinations of Moneys with MoneyBags. Before we code on, we therefore define a couple more test cases. The expected MoneyBag results use the convenience constructor shown above, initializing a MoneyBag from an array. public void testMixedSimpleAdd() {
// [12 CHF] + [7 USD] == {[12 CHF][7 USD]}
Money bag[]= { f12CHF, f7USD };
MoneyBag expected= new MoneyBag(bag);
Assert.assertEquals(expected, f12CHF.add(f7USD));
} The other tests follow the same pattern: Next, we extend our test suite accordingly: public static Test suite() {
TestSuite suite= new TestSuite();
suite.addTest(new MoneyTest("testMoneyEquals"));
suite.addTest(new MoneyTest("testBagEquals"));
suite.addTest(new MoneyTest("testSimpleAdd"));
suite.addTest(new MoneyTest("testMixedSimpleAdd"));
suite.addTest(new MoneyTest("testBagSimpleAdd"));
suite.addTest(new MoneyTest("testSimpleBagAdd"));
suite.addTest(new MoneyTest("testBagBagAdd"));
return suite;
} Having defined the test cases we can start to implement them. The implementation challenge here is dealing with all the different combinations of Money with MoneyBag. Double dispatch [2] is an elegant way to solve this problem. The idea behind double dispatch is to use an additional call to discover the kind of argument we are dealing with. We call a method on the argument with the name of the original method followed by the class name of the receiver. The add method in Money and MoneyBag becomes: class Money implements IMoney {
public IMoney add(IMoney m) {
return m.addMoney(this);
}
//…
} class MoneyBag implements IMoney {
public IMoney add(IMoney m) {
return m.addMoneyBag(this);
}
//…
} In order to get this to compile we need to extend the interface of IMoney with the two helper methods: interface IMoney {
//…
IMoney addMoney(Money aMoney);
IMoney addMoneyBag(MoneyBag aMoneyBag);
} To complete the implementation of double dispatch, we have to implement these methods in Money and MoneyBag. This is the implementation in Money. public IMoney addMoney(Money m) {
if (m.currency().equals(currency()) )
return new Money(amount()+m.amount(), currency());
return new MoneyBag(this, m);
}
public IMoney addMoneyBag(MoneyBag s) {
return s.addMoney(this);
} Here is the implemenation in MoneyBag which assumes additional constructors to create a MoneyBag from a Money and a MoneyBag and from two MoneyBags. public IMoney addMoney(Money m) {
return new MoneyBag(m, this);
}
public IMoney addMoneyBag(MoneyBag s) {
return new MoneyBag(s, this);
} We run the tests, and they pass. However, while reflecting on the implementation we discover another interesting case. What happens when as the result of an addition a MoneyBag turns into a bag with only one Money? For example, adding -12 CHF to a Moneybag holding 7 USD and 12 CHF results in a bag with just 7 USD. Obviously, such a bag should be equal with a single Money of 7 USD. To verify the problem let's implement a test case and run it. public void testSimplify() {
// {[12 CHF][7 USD]} + [-12 CHF] == [7 USD]
Money expected= new Money(7, "USD");
Assert.assertEquals(expected, fMB1.add(new Money(-12, "CHF")));
} When you are developing in this style you will often have a thought and turn immediately to writing a test, rather than going straight to the code. It comes to no surprise that our test run ends with a red progress bar indicating the failure. So we fix the code in MoneyBag to get back to a green state.
public IMoney addMoney(Money m) {
return (new MoneyBag(m, this)).simplify();
}
public IMoney addMoneyBag(MoneyBag s) {
return (new MoneyBag(s, this)).simplify();
}
private IMoney simplify() {
if (fMonies.size() == 1)
return (IMoney)fMonies.firstElement()
return this;
} Now we run our tests again and voila we end up with green. The code above solves only a small portion of the multi-currency arithmetic problem. We have to represent different exchange rates, print formatting, and the other arithmetic operations, and do it all with reasonable speed. However, we hope you can see how you could develop the rest of the objects one test at a time- a little test, a little code, a little test, a little code.
In particular, review how in the development above:
You can always write more tests. However, you will quickly find that only a fraction of the tests you can imagine are actually useful. What you want is to write tests that fail even though you think they should work, or tests that succeed even though you think they should fail. Another way to think of it is in cost/benefit terms. You want to write tests that will pay you back with information.
Here are a couple of the times that you will receive a reasonable return on your testing investment:
Once you've been test infected, your attitude toward development is likely to change. Here are some of the changes we have noticed:
There is a huge difference between tests that are all running correctly and tests that aren't. Part of being test infected is not being able to go home if your tests aren't 100%. If you run your suite ten or a hundred times an hour, though, you won't be able to create enough havoc to make you late for supper.
Sometimes you just won't feel like writing tests, especially at first. Don't. However, pay attention to how much more trouble you get into, how much more time you spend debugging, and how much more stress you feel when you don't have tests. We have been amazed at how much more fun programming is and how much more aggressive we are willing to be and how much less stress we feel when we are supported by tests. The difference is dramatic enough to keep us writing tests even when we don't feel like it.
You will be able to refactor much more aggressively once you have the tests. You won't understand at first just how much you can do, though. Try to catch yourself saying, "Oh, I see, I should have designed this thus and so. I can't change it now. I don't want to break anything." When you say this, save a copy of your current code and give yourself a couple of hours to clean up. (This part works best you can get a buddy to look over your shoulder while you work.) Make your changes, all the while running your tests. You will be surprised at how much ground you can cover in a couple of hours if you aren't worrying every second about what you might be breaking.
For example, we switched from the Vector-based implementation of MoneyBag to one based on HashTable. We were able to make the switch very quickly and confidently because we had so many tests to rely on. If the tests all worked, we were sure we hadn't changed the answers the system produced at all.
You will want to get the rest of your team writing tests. The best way we have found to spread the test infection is through direct contact. The next time someone asks you for help debugging, get them to talk about the problem in terms of a fixture and expected results. Then say, "I'd like to write down what you just told me in a form we can use." Have them watch while you write one little test. Run it. Fix it. Write another. Pretty soon they will be writing their own.
So- give JUnit a try. If you make it better, please send us the changes so we can spread them around. Our next article will double click on the JUnit framework itself. We will show you how it is constructed, and talk a little about our philosophy of framework development.
We would like to thank Martin Fowler, as good a programmer as any analyst can ever hope to be, for his helpful comments in spite of being subjected to early versions of JUnit.
Here's a couple of simple classes. XStream can convert instances of these to XML and back again.
public class Person {
private String firstname;
private String lastname;
private PhoneNumber phone;
private PhoneNumber fax;
// ... constructors and methods
}
public class PhoneNumber {
private int code;
private String number;
// ... constructors and methods
}Note: Notice that the fields are private. XStream doesn't care about the visibility of the fields. No getters or setters are needed. Also, XStream does not limit you to having a default constructor.
To use XStream, simply instantiate the XStream class:
XStream xstream = new XStream();
You require xstream-[version].jar and xpp3-[version].jar in the classpath. XPP3 is a very fast XML pull-parser implementation. If you do not want to include this dependency, you can use a standard JAXP DOM parser instead:
XStream xstream = new XStream(new DomDriver()); // does not require XPP3 library
Note: This class is a simple facade designed for common operations. For more flexibility you may choose to create your own facade that behaves differently.
Now, to make the XML outputted by XStream more concise, you can create aliases for your custom class names to XML element names. This is the only type of mapping required to use XStream and even this is optional.
xstream.alias("person", Person.class);
xstream.alias("phonenumber", PhoneNumber.class);Note: This is an optional step. Without it XStream would work fine, but the XML element names would contain the fully qualified name of each class (including package) which would bulk up the XML a bit. See the Alias Tutorial a more complete introduction.
Let's create an instance of Person and populate its fields:
Person joe = new Person("Joe", "Walnes");
joe.setPhone(new PhoneNumber(123, "1234-456"));
To reconstruct an object, purely from the XML:
Person newJoe = (Person)xstream.fromXML(xml);
And that's how simple XStream is!
To recap:
xstream.alias(String elementName, Class cls);xstream.toXML(Object obj);xstream.fromXML(String xml);
joe.setFax(new PhoneNumber(123, "9999-999"));
Now, to convert it to XML, all you have to do is make a simple call to XStream:
String xml = xstream.toXML(joe);
DWR generates Javascript code that is similar to the Java code that exported using dwr.xml.
The biggest challenge in creating a remote interface to match some Java code across Ajax is the (usually) asynchronous nature of Ajax, compared to the synchronous nature of a normal Java call.
DWR solves this problem by introducing a callback function that is called when the data is returned from the server.
There are 2 recommended ways to make a call using DWR. Either using by appending a callback function to the parameter list or by appending a call meta data object.
It is also possible to put the callback function at the start of the parameter list, however this option is not advised because there are some issues when dealing with automatic http objects (see "Alternative Method"). This method mostly remains for backwards compatibility.
Firebug is an extension for the Mozilla Firefox browser that allows you to debug and inspect HTML, CSS, the Document Object Model (DOM) and JavaScript. Though it has many strong features, it’s most known for revolutionizing the way developers debug and profile JavaScript code.
For example, before Firebug, many developers would use the alert() function to see what a variable contains or to find what line the code breaks. With Firebug enabled, you’re told specifically what the error is and which line it comes from. Firebug is an excellent tool for AJAX application developers because it lets you explore and perform on-the-fly edits on the DOM to see what happens when you manipulate Web page elements after a user action.
Aside from its popular JavaScript and DOM functionalities, Firebug can also log network activity to allow you to see detailed results of HTTP connections, inspect and edit HTML on the fly and debug and visualize your CSS.
Further Reading
The Web Developer extension (for the Firefox, Flock and SeaMonkey Web browsers) is an add-on that adds a tool bar with a menu of options for debugging and inspecting Web pages. It has a ton of features, my favorite being the View CSS Information option (CSS >> View Style Information, or Control + Shift + Y on Windows) which makes a page element clickable and shows you CSS selectors that affect that particular page element. It’s helpful for exploring and understanding large CSS files and projects that you’re unfamiliar with (such as a new open-source content management system).
It has built-in options for syntax validation for popular Web services, such as W3C’s CSS Validator and HiSoftware’s Web Content Accessibility Report, for your convenience. It has many other useful features, such as disable options for CSS, JavaScript and images, to test for degradation and progressive enhancement; a Forms menu with options for working with Web forms; Display Div Order and Display Block Size options to help you visualize the layout; and so much more.
YSlow is a Firefox extension created by Yahoo! developers that integrates with Firebug (therefore you need to have Firebug enabled for it to work). YSlow analyzes a Web page for front-end performance and, in its simplest usage, gives you a letter grade (A being the best and F being the poorest) for each of the best practices for speeding up your website.
YSlow also allows you to inspect in detail things that are essential for a high-performance website. For example, the Stats view gives you the total size of a Web page and a summary of items that are loaded when the Web page is requested (i.e. style sheets, JavaScript files, Flash objects and images), so that you can hunt down the bottlenecks that cause a Web page to load slowly.
The Components view outlines every single component of a Web page in tabular format and allows you to inspect it to see attributes such as size, expiration date (for cached files), whether it uses server-side compression (Gzip) and response time (how long the component took to load).
Further Reading
If you need similar functionality to that of Firebug and Web Developer for Firefox, but want to debug, inspect and tune your Web pages and applications on the Internet Explorer browser, check out the Internet Explorer Web Developer Toolbar. The IE Web Developer Toolbar, when enabled, opens a toggle-able pane located at the bottom of the Web browser, giving you access to many helpful options for exploring Web page components.
For example, you can experiment to see how page elements work by editing the Web page’s DOM and HTML directly in the browser, allowing you to quickly change and edit DOM elements to see what happens when you perform certain actions or modify certain parts of the code. You can also debug, test and inspect JavaScript with the IE Web Developer Toolbar, giving you options for setting breakpoints, seeing the call stack and exploring variable attributes.
It has a ton of other helpful features, such as selectively disabling IE settings (to see how your Web pages degrade in IE); the ability to view the HTML and CSS source of any Web page with syntax-highlighting; and an in-browser ruler to help you measure things on a Web page.
Further Reading
Fiddler is an Internet Explorer extension that analyzes and profiles a Web page’s HTTP traffic. If you’ve ever wanted to know exactly what happens when a client requests a Web page, Fiddler is the tool that’ll help you do the job. The HTTP Statistics view exposes all components and files required to generate a particular page, giving you details such as the total number of HTTP requests, total page weight, HTTP response headers and cache expiration.
Fiddler permits you to set up breakpoints, allowing you to step through and edit HTTP traffic (to see how it would affect your Web page), a useful feature for analyzing AJAX-based interaction and potential security flaws in a Web application. Perhaps what makes Fiddler so powerful is its extensibility, allowing you to create your own scripts (or import other developers’ scripts) to perform certain tasks or make interface modifications to the extension itself.
Further Reading
DebugBar is a debugging in-browser extension for the Internet Explorer browser. It has many helpful features, such as the ability to send a Web page screenshot via email, a color picker, the ability to view both the original and interpreted code (i.e. if you use JavaScript to manipulate the styles of a DOM object, then you can see the interpreted HTML source code of that manipulation) and a Console API (after installing Companion.JS) to help you gain information through a command-line interface about particular components of a Web page.
DebugBar is free for personal and educational use, but you are required to buy a license if you use it for commercial purposes.
HttpWatch is another HTTP traffic viewer and debugger for Firefox and Internet Explorer that is similar to Fiddler. It has many unique features and a more intuitive, less intimidating interface than Fiddler. Some notable features are the ability to generate request-level time charts (useful for documentation and presentation purposes); decryption of HTTPS traffic to help you debug, inspect and tweak your secure SSL-based connections; and the ability to export captured data to XML and CSV formats for importing into spreadsheet applications such as Microsoft Excel or Google Spreadsheets.
HTTPWatch has a Basic edition, which is free, and a Professional edition, which has more options. Check out the comparison table between the two editions to see the exact differences.
Live HTTP Headers is a Firefox extension that allows you to inspect HTTP request and response headers. Exploring HTTP headers allows you to debug Web applications, glean some information about the website’s server and inspect cookies sent to the client requesting the page.
For example, the Server response header gives you a website’s HTTP server type (Apache, IIS, nginx, etc.), the HTTP server version and the operating system (though server administrators can remove or limit the information you see for security purposes).
The Web Accessibility Toolbar is a freeware extension for Internet Explorer and Opera that gives you a slew of options for quickly evaluating and analyzing your Web content’s accessibility. It has validation options for submitting your URL to content accessibility web services such as Juicy Studio tools, a grayscale converter to simulate the user experience of individuals with color-blindness and poor eyesight, and a search function for particular page structures (e.g. finding list objects and unordered lists).
Other useful tools released by Vision Australia are the Colour Contrast Analyser, which analyzes the contrast of foreground and background colors for readability, and the Complex Table Mark-Up (or Com Tab) Toolbar, which can help you understand (and construct) complex tables that are usable by non-traditional Web browsers (such as screen readers).
Further Reading
Fangs is an in-browser tool for Firefox that emulates what a screen reader “sees” when visiting a Web page. Its function is simple: to output a transcript of what a screen reader will read out to a user when a Web page is visited. It’s a helpful tool for quickly analyzing if you’ve structured your content effectively so that it’s understandable and usable by vision-impaired individuals, without forcing you to learn to use (and purchase) a screen-reader application such as JAWS or Windows Eyes.
Further Reading
Venkman is the codename for Mozilla’s very own JavaScript debugging environment. It is available as an add-on that can be used to extend browsers such as Firefox, Netscape, and SeaMonkey. It is a robust environment for doing complex JavaScript debugging and troubleshooting. The Console view gives you a command-line interface for interacting with the debugger. It has an excellent Stack view feature that allows you to step through active functions when it reaches breakpoints.
Further Reading
ColorZilla is an incredibly simple — but very useful — extension for Firefox. If you’ve ever wanted to determine what colors are used on a Web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.
Clicking on the eyedropper icon makes objects on the Web page clickable, and upon clicking a particular section of a Web page, it outputs the hexadecimal, RGB and hue/saturation values of that area . Before ColorZilla, you might have pasted a screen capture of a Web page into a graphics editor like Photoshop and then used the eyedropper tool in the editor to sample colors. ColorZilla saves you time and streamlines color-sampling processes.
FireShot is an in-browser tool for Firefox and Internet Explorer that allows you to take screenshots and then annotate, edit, organize and export them. Screen-grabbing is a common activity for Web developers to document previews of Web application prototypes and share them with clients, and FireShot gives you a feature-packed in-browser option to manage and streamline your screenshot needs.
Web Inspector is part of the Webkit open-source browser engine project. It’s an ultra-sleek tool for inspecting the DOM hierarchy in a separate, compact HUD-style window. You can easily search the DOM, explore the DOM tree (hierarchy) and have a useful interface for isolating DOM sub-trees and nodes so that you can focus on particular sections of a Web page. The Web Inspector also provides you with a Style pane to explore CSS rules applied to particular page elements.
FireFTP is a free, cross-platform Firefox extension for FTP’ing files. It offers several advantages to stand-alone FTP applications, such as its operating system-independent requirements. What’s exceptional about FireFTP is that even though it is an in-browser (and free!) application, it has all the features you would expect from a standalone FTP application, such as support for secure (SSL, TLS, SFTP) protocols, a synchronization feature to sync up local and remote files, and directory comparison to help you see what files are missing or different between two directories and much more.
There is an overwhelming amount of in-browser tools for Web development out there. Some are specific to particular Web technologies and set-ups (such as FirePHP for PHP developers, SQLite Manager for developers using SQLite databases, and Opera Dragonfly for developers who prefer using the Opera browser). If your favorite tool isn’t on the list, let us know in the comments section why it’s your favorite and why we should check it out.
Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.
| varchar(100) | utf8_general_ci |
Below are 15 useful project management applications, almost all of which are targeted directly at Web developers, designers (both Web and print) and other creative types. The last one is not geared specifically to creative types but is the most unique project management application I’ve found and is included on that basis as well as because of its potential usefulness for designers and developers.
Also consider our previous article:
These applications are marketed specifically for project management. Most include things like task-, team-, and goal-management features. Some include additional features such as time tracking and invoicing.
Lighthouse is a bug- and issue-tracking app that tracks timelines and milestones, integrates with your email client and more. You can update tickets through your inbox, manage your beta testing (by making tickets and milestones public), integrate it with subversion and manage and prioritize your tickets.
Project creation is simple; only a project title and description is required. Once a project is created, tickets, messages and milestones can be entered. Ticket creation can be done by email (the email address to send tickets to is displayed on the “Tickets” page). You can show tickets based on a variety of criteria, including date, state (open or closed) and who is responsible for them. Message creation is easier than email, and you can attach files up to 50 MB in size. When you create a milestone you simply enter the title, the date it’s due and the goals or focus for that particular milestone. It doesn’t get much simpler than that.
Permissions are easy to set, and you can invite users by email. One of the best features of Lighthouse is its Beacon and API integration. With the API, you can customize tickets, projects, changesets, milestones, messages and more. Integrate it with other services (such as Google Calendar), or make desktop applications that use Lighthouse. The APIs make Lighthouse infinitely more useful, because you can really customize it to fit your current workflow.
Lighthouse is great for Web development teams (or individuals) and has a very easy-to-use interface. They have paid and free plans, all of which include unlimited open-source projects. The free plan lets you manage one private project with up to two people on the account. The paid plans range from $10 per month for the Personal plan (with up to 3 projects, 10 users and 100 MB of file upload storage space) to $120 per month for the Platinum plan (with unlimited projects, up to 50 public projects, unlimited users and 30 GB of file upload space).
When combined with a subversion app, Lighthouse provides a pretty complete project management app for developers. Subversion integration is pretty straightforward, and the help file provided gives complete step-by-step instructions for setup.
Springloops is another subversion browser that integrates project management. It counts a unique AJAX code browser and Basecamp integration as among its features.
The Springloops interface is very intuitive and easy to use. Tabbed navigation provides access to the log, source and deployment information. Adding users is done via email, along with the ability to create usernames and passwords (making it easier and faster for them to get on board with a project). Creating new projects is simple, with a few different templates available (including a starter template). You can migrate an existing repository into Springloops as well (including plain text dumps). For added project management ability, Springloops can be integrated with Basecamp.
Springloops has a number of plans available, both paid and free. The free plan includes 25 MB of space, 3 projects, 3 deployments per day (using FTP or SFTP connections), roll-back capabilities, Basecamp integration, subversion and an unlimited number of users. The paid plans range from the “Flowerpot” plan at $9 per month (including 1 GB of space and 10 projects) to the “Forest” plan at $96 per month (including 18 GB of storage, unlimited projects, automatic deployment and secure SSL encryption). All of the paid plans include a free 30-day trial.
CreativePro Office offers complete office management tools. CreativePro Office is completely free, setting it apart from the other apps here.
CreativePro Office has the usual tabbed navigation, including tabs for clients, projects, time sheets, finances and team members. The dashboard presents a calendar with upcoming events, a list of your projects, outstanding invoices, notes and search functionality. Project creation is a bit more in-depth than with most other apps listed here, though only a client name and project name is required (you can also fill in a project URL, description or comments, category, date range, status, contacts and tags). Client tracking is integrated, making this handy for those who work with lots of different clients, and it could even serve as a simple CRM program, depending on your needs.
Integrated invoices and financial information is handy, and the finances page gives you options for viewing and creating invoices, expenses and reports.
CreativePro Office is very robust for a completely free application and is definitely worth checking out before shelling out for an expensive paid solution.
Jumpchart is a website planning application that allows you to plan the navigation of your website by creating, dragging and dropping pages into the plan. You can also add text and formatting to pages and then export your CSS files and site map when you’re finished.
This is a great planning app for Web designers, though it’s not strictly a project management application. You can add comments to each page, which could serve to keep track of tasks related to specific pages. More traditional project management functions could be kept track of in the text of each mockup page or through the comments. The mockup and planning capabilities of Jumpchart make it worth using, even if hacks are needed to make it more conducive to full project management.
The free Jumpchart plan offers 1 project with 1 MB of storage and a maximum of 10 pages and 2 users. The paid plans range from the Simple plan at $5 per month (including up to 5 projects, with 25 pages and 5 users per project, and 100 MB of storage) to the Deluxe plan at $50 per month (including up to 30 projects with unlimited pages and users and 5000 MB of storage).
No Kahuna is a simple project management and issue-tracking platform. It’s very straightforward and easy to use, with an excellent user interface. Features include task and activity tracking and collaboration tools.
No Kahuna is excellent for basic project management and ticket tracking. There aren’t a ton of features, which can be a very good thing. It’s very quick to get started, also a big plus.
There are free accounts available that include unlimited projects and users. However, if your projects accumulate more than 30 open tasks, you will need to upgrade. Paid options are reasonably priced, ranging from 3 projects for $9 per month up to 100 projects for $99 per month. Open-source projects are always free, no matter how many open tasks you have.
Basecamp is often considered to be the best project management and collaboration platform out there. Its features are impressive: to-do lists, file sharing, message boards, milestones, time tracking, project overviews and commenting.
The user interface is definitely one of the best out there, and because of its popularity, tons of other companies are making products that integrate with Basecamp, extending its capabilities.
Pricing is reasonable, though it’s definitely not the cheapest solution out there. The Basic plan is only $24 per month and includes up to 15 active projects, 3 GB of file storage and unlimited clients and users. The Max plan is a hefty $149 per month, but includes unlimited projects, 50 GB of file storage, time tracking, SSL security and a free Campfire Premium account.
Wikis are another option for project management, whether you use one instead of a basic project management application or in addition to one. One of the solutions below is geared to complete project management and includes additional features, while the other is just a wiki and is suitable for project management and other uses.
Trac Project is a project management app that is based on wiki functionality. It also includes a subversion browser, a timeline, ticket tracking, a road map (showing milestones and the number of current open and closed tickets) and builds status tracking.
One of Trac’s best features is the range of plug-ins available for it. There are plug-ins for Web administration, authentication, code documentation, file management, ticketing, testing, user management and version control.
Another big advantage: Trac is free and licensed under a modified BSD license.
PBwiki is one of the easiest free wikis out there to use. You can share files with other users, set access controls for individual pages and folders, add other users to your wiki, monitor and track version changes and more.
Setup is quick and easy and can be done in less than a minute. The PBwiki interface is very intuitive, and there is virtually no learning curve. Creating folders and pages is straightforward, as is editing existing pages. You can also comment on each page, and get a printable version with a single click.
There are multiple themes you can choose from for the design, as well as templates for individual page content (or you can start from scratch). There are a few different plans available, both paid and free. The free plan allows from 1 to 3 users. Paid plans range from $4 per month per user (if you have more than 10,000 users) to $8 per month per user (for 4 to 999 users).
Any time you work on a Web application or website, there are going to be bugs and issues that crop up. While some basic project management applications have built-in ticket tracking, others don’t, and sometimes the built-in solution doesn’t quite meet your needs (either because it’s too robust or is missing key features).
16bugs is a very simple bug-tracking system. Its main advantage is the color-coding system used for different types of information (like updates, comments and closed tickets).
Setup is quick and easy. The user interface is easy to figure out. Creating bugs is easy, and the color-coded labels on the activity tab make it easy to see what’s going on at a glance.
There are a variety of account types available. The free account allows 1 project, 1 MB of storage and Basecamp imports. Starting at $8 per month, paid plans include more projects (3 with the Basic plan), 150 MB to 10 GB of storage, RSS and email notifications, Campfire notifications and SSL (starting with the $15-per-month Big plan).
JIRA is issue- and bug-tracking software that includes a lot of great features. It has advanced reporting features, workflow mapping as well as issue and project organizing; it is also customizable.
JIRA also offers a number of plug-ins to extend its functionality, including Bamboo integration, charting, time tracking, project management, a calendar and more. By using plug-ins, you can customize JIRA to meet your exact project management and issue-tracking needs.
JIRA’s biggest drawback is its pricing; it’s not cheap. A hosted account starts at $299 per month for up to 25 users and goes up from there (250 users costs $599 per month). If you want to download JIRA and host it on your own server, it starts at $1200 for a single project team, and goes as high as $4800 for an entire organization. If you need an academic license, solutions start at only $600.
If you’re working with a remote team on your project, you’re probably going to need some online space to collaborate and meet, whether it’s to work on general concepts or to work out specific bugs. Here are three solutions to help you collaborate with those on your team or with your clients.
activeCollab is a project management and collaboration tool that lets you set up a collaboration area right on your website. You can have unlimited projects, organized into groups for easy management.
Collaboration features include file sharing, discussions (set up like an online forum), assignments, collaborative writing and reminders. Project management features include printing and exporting, time tracking, calendar and schedule functionality, ticket management and milestones. Plug-ins (modules) mean that activeCollab can be extended to suit your specific needs.
There are two pricing options available: Corporate and Small Business. The Small Business edition includes source-code browsing, plug-in support, themes, discussions, milestones, checklists, files, project templates, a mobile interface and localization support. It’s priced at $199, with support and upgrades being an additional $99 per year after the first year. The Corporate edition has all of the above features, plus the calendar, tickets, time tracking, pages (with collaborative writing and more), a project explorer, and status updates. Both packages include unlimited projects and users. You can also purchase a Copyright Removal license, which removes the “activeCollab Powered” graphic from the footer of each page, for an additional $199.
DimDim is a Web-conferencing platform that provides collaboration tools for meeting online. It’s scalable, reliable and flexible, with both hosted and on-site versions available.
DimDim allows you to share your desktop with those you’re meeting with, as well as share and present documents (both PowerPoint and PDFs). You can also share Whiteboards, and it has built-in voice-over-IP and teleconferencing capabilities. There are public and private chat capabilities as well as annotation and markup tools.
There are free and paid plans available. The free plan offers the complete feature set, with support for meetings of up to 20 people. DimDim Pro offers the complete feature set, plus custom branding and up to 100 people in a meeting for only $99 per year. There is also an Enterprise-level package that includes all of the above but also allows simultaneous meetings with up to 1000 attendees for $1998 per year.
Vyew is a browser-based Web presentation service that allows for custom branding and PowerPoint-like authoring. With Vyew, you can give a live presentation or just post a document for your colleagues to review at their convenience.
Features include real-time desktop sharing, whiteboarding and drawing tools, embedded comments, built-in voice over IP, free teleconferencing, built-in webcam video support, text chat, dedicated rooms and direct URLs and more. It’s a complete solution for Web conferencing.
Vyew has a number of plans available, including a free plan, which includes unlimited meetings, SSL secure log-in, up to 20 participants (all seeing ads) and up to 5 VyewBooks (presentations) with up to 50 pages each. There are two paid plans: Plus at $6.95 per month, which includes everything the free plan has plus up to 25 participants (or 5 with no ads), and up to 25 VyewBooks with up to 100 pages each, and Professional at $13.95 per month, which includes everything the Plus plan has, but with up to 45 participants (or 15 with no ads), and up to 100 VyewBooks with up to 300 pages each.
Unless you’re working on an internal project, chances are you’ll need to send out invoices. Having an invoice program that also does proposals is helpful, as is having one that integrates directly with your project management app.
Simply Invoices integrates with Basecamp, More Honey, Tick and Harvest to invoice based on time that you track with those programs. Features include invoice templates, unlimited invoices, the ability to save invoices as PDFs and invoice tracking.
There are a few different plans available, including a free plan that includes up to five invoice templates and SSL support. Paid plans start at $9 per month (which includes up to ten invoice templates, plus a custom logo and link-free invoices) and go up to $25 per month (which includes an unlimited number of templates).
Less Accounting is a simple online accounting and invoicing program that is incredibly easy to use. Less Accounting has a variety of features, including proposal creation and tracking, mileage tracking, sales-lead management and expense tracking. You can import your existing Wesabe.com account, and you can even invite your CPA to look at your books. Less Accounting also sends a weekly email with an update on the status of your accounts.
There are a variety of account plans available, including a free plan. The free plan includes up to 5 invoices, expenses, sales notes, deposits, proposals, mileage logs each month, SSL encryption, reports and bank-account integration. The paid plans range from the Even Less plan at $12 per month (including invoicing, expenses, contacts, SSL encryption, technical support, deposits and reports) to the More plan at $24 per month (including everything in the Even Less plan, plus sales notes, bank accounts, proposals, mileage logs, bank reconciliation, support for multiple types of sales tax and more). A 30-day free trial is available for all plans.
Whether you need to keep track of your time for billing purposes, for your boss, or just to measure your own productivity, chances are you’ll need a time-tracking application.
LiveTimer is an easy-to-use time-tracking program that works on both your computer and iPhone. It can be used for billing purposes or simply to improve your productivity and accountability.
Features include a daily ledger, bulk time entry (by day or week), customizable classifications, multiple currencies, custom billing rates, intelligent report filters and a developer API. The iPhone integration makes it easy to track your time even if you’re not at your desk, making it more useful than many other Web-based time-tracking applications.
Pricing is cheap, at only $5 per active user per month. Qualifying non-profits get a 50% discount. There is a 30-day free trial available.
fourteenDayz is a time-tracking program specifically for teams. It features day-by-day time sheets, exportable reports (in both PDF and Excel formats), drag-and-drop categories and no user limit.
There are 6 different plans offered, including a free account (which includes up to 4 active projects/clients, 10 project categories, an unlimited number of users and reporting functions). The paid plans range from the Personal at $5 per month (which includes the free account features plus up to 7 active projects/clients, 15 project categories, 30 project subcategories and PDF reports) to the Platinum at $99 per month (which includes all the Personal features plus unlimited active projects/clients, unlimited project categories and subcategories, XLS/CSV exportability and SSL connections).
For more project management applications, check out:
Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, GreenStyle Magazine, which will be relaunching later this year.
(al)
