Development, Testing, Production

I’ve been working freelance for quite a long time, and most of my projects were solo or perhaps two or three people at max, leaving me as the leading developer. Since January this year I’ve been working on a few projects with a team of over 5 people and high-demanding standards. This raised the problem of project managing and a completely different view of the web development cycle. In this article I’d like to outline the major steps of the software development cycle and how they could be applied to the web development business.

Development: Pre-alpha Stage

As we all hopefully know, each web application starts from a project overview written by both the client and the web development company. After this overview has been approved, the designers start to sketch, the programmers start to write code blocks, and the content managers gather keywords and start writing short subjects, while the client sits back and gets ready to mock anything that is sent their way. This is probably the pre-alpha stage, sometimes called wireframing or mocking up (in general, not only design terms).

Development: Alpha Stage

This, perhaps, is the stage where the design layouts are shown to the client, some text is revealed by the content managers, and something gets approved by the client. In most cases this stage takes the majority of time dedicated to the whole project. It’s pretty difficult sometimes to convince clients why certain designs look better than others, especially if they have a bad, or no taste at all. Practice shows that it’s often a good idea to:

Present the client with two variants to pick from – a really aweful one that in general terms could be used, but with a probability of at least 95% that it wouldn’t; and a really good one that you and your company placed the bet on.

Sure there’s a chance that your client goes with the first choice and you’ll end up working on something that makes you sick, but hey, this doesn’t work all the time ;)

Development: Beta Stage

After everything has been approved by the client, the Beta development stage is where coders have some fun. There’s no reason to expect that they get it right from the first time, especially when working on a big project. This is where I suggest you use the three environments method – development, testing, production. Some modern IDEs such as RubyMine (for Ruby on Rails) have built that in, allowing you to switch from one environment to another with a click of a mouse. But unfortunatelly the browser problem persists.

I came across a really useful Firefox addon a few weeks ago, it’s called SwitchHosts. At first sight it’s something that is unnecessary – development environments could be switched to different subdomains – dev.domain.com and test.domain.com, finally the production address – domain.com. This, in my opinion, is something that’s really difficult to tackle when working with software that stores options, etc into databases. For instance – WordPress, where the database is tied to a certain domain.

Sure you could go ahead and use your text editor’s Search and Replace function but:

• Would you really like to do it every single time?
• Would you like to teach your other employees to do that?
• What if there’s an error checking algorithm involved? For instance WordPress widgets disappear after a Search and Replace run.
• It’s so much easier to keep track of a single database dump than three.

Convinced? Okay but why do you need SwitchHosts to keep one domain tied to three different addresses? Couldn’t you just use the hosts file for that? Well, sure, but then again, try to explain to your employees (I’m talking about the less coder-fellows) how to work with the hosts file, then of course they’ll forget to flush their DNS cache as soon as they’ve added that extra line. They’ll end up making changes to the production server, and you wouldn’t like that, would you?

With SwitchHosts for Firefox you could switch to as many hosts file as you setup in only a couple of clicks. Besides, it’s always there in your status bar, showing which hosts file is currently active which, believe me, solves plenty of problems. One more feature I love in SwitchHosts is that it flushes your DNS cache automatically as soon as you switch from one environment to another.

Make sure that you’ve setup version control systems (such as Subversion) on each of the environments. It’ll make it much easier when replicating from development to testing and back to development, as well as from testing to production.

The Beta Development Stage is probably the most important part to return back to when your client is not satisfied with the results, or perhaps would like to add a few minor changes to the layout, text or pictures. Of course they should be charged extra for this, and it’s extra work for you, but hey, it’s their money they’re wasting ;)

Testing: Release Candidate

Each Release Candidate should probably be located on the remote testing server, unlike the development, which should be kept locally for the developers. Of course it’s easier to do local testing, but:

• All tests should be held in environments as close to the real world as possible, thus a remote machine, preferably on the same hosting plan as you production server. Don’t confuse “same hosting plan” and “same server” – your testing and production units should have different IP addresses.
• Your content managers will need to polish their work, would you really like to educate them to install server software and deploy the project on their local machines, nah! ;)
• After all our testing environment couldn’t be located on the same machine as the development. Wha? Run two different copies of Apache?

So, the RC is where you show off to the project manager, who asks the content managers to review their work on a working website. They could do this online themselves, or they could send reports to the developers.

Release to Marketing (from the general software development cycle) should be in the middle of this stage, where a decision is usually taken to go on and show the results or return back to beta development.

So if Marketing approves the whole thing, the end of the RC stage is where you should show the results of you work to the client. Of course they’ll need some hosts-file hi-jacking, and perhaps with the SwitchHosts addon it wouldn’t be as dirty as it usually is. If the client has good reasons not to do this, then of course you should drive it over to a sub-domain. But I really don’t recommend you showing off on the production server, especially if there’s an old website working there – clients don’t like their old websites to be taken down before the new one is 100% approved. Some of them don’t understand that there’s an option to restore their old website ;)

And when the Boss says yes …

Production: General Availability

This is the victory stage. It’s where both parties yell “Wohoo!”, drink champagne and drunk coders deploy the project to the production server overnight. What could possibly go wrong? Often takes less than a minute:

1
2

svn checkout svn/tags/1.0 .
mysql -uname -ppass db < include/db.sql

Great! Well this doesn’t mean that you can go ahead and delete everything you’ve done at the development environment. Yes, testing server can go to rest, but you should always keep a copy of all your work, preferably in an archived Subversion repository. Why?

• The client could return in two weeks and say: hey, remember you showed me that second version before this third? Could we return to that if payed you some extra cash?
• Your client could ask you for a backup copy of the work you’ve done. You shouldn’t have problems handing it over or restoring the website if they broke it within a few weeks. Keep a good reputation.
• Parts of it (even those which were rejected) could be quite useful in future projects.
• If clients are satisfied with the work you’ve done, they will probably return to you when they’ll need to add a few extra functions to the website that you made.

Well, that’s about it. Of course if you’re a solo-freelancer you wouldn’t need any of this stuff. You wouldn’t need version control systems at all, as all your work is done by you. A project backup is simply a copy-paste issue. Though it’s sometimes useful to imitate teamwork. After all, you can’t be sure that you’ll be coding solo for the rest of your life ;)

There are tonnes of free and open source tools out there to help you out in version control – Subversion; and in project management – The Trac Project (P.S. check out these 5 Really Useful Trac Reports).

This was the web development cycle outlined based on my experience. Sure some individuals and companies work using modified versions of this cycle, some use a completely different model. But, whichever one is picked, it all comes down to three major phases – development, testing, production. So, what’s your case? Which model is used by your company and why do you prefer to work that way? Feel free to give a word in the comments area below.

Related posts:

1. jQuery Cycle: Pager and pagerAnchorBuilder
2. Plugin Development: Technical Support for WordPress
3. 5 Really Useful Trac Reports

Effective Project Management with Trac

Before showing off the snipets that I wrote for Trac Reports I’d like to give you one little hint if you’re running Trac on an old (but stable) OS version, such as Fedora Core 8. Amazon EC2 still ships the Fedora 8 operating system as default for Linux-based EC2 instances, and a simple yum install trac will get you version 0.10.x, which is outdated. The trick here is to install:

1
2

yum install python-setuptools
yum install python-setuptools-devel

Which include a package called easy_install. Since you’ve got an old version of Trac installed, use easy_install to update it, like this:

1

easy_install -U trac

Bam! Wasn’t that easy? One more situation where you can use easy_install is to install Trac plugins directly from their repositories (instead of the old way by uploading source files).

Okay, now back to the reports. I made these with a little experimenting with the Trac database. It’s structure is pretty much transparent and obvious, so if you’re an SQL genius then go ahead and write your own. Here’s my most useful list …

1. All Tickets Reported by Me

This report is very useful to track the status of all your tickets. Shows all types of tickets in all states (opened, closed). Have you ever submitted a ticket and then couldn’t find it in your submitted tickets because it was marked as fixed or wontfix? Here’s the SQL query:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

SELECT p.value AS __color__,
    (CASE STATUS WHEN 'accepted' THEN 'Accepted'
        WHEN 'new' THEN 'New' 
        WHEN 'owned' THEN 'Owned' 
        WHEN 'closed' THEN 'Closed' 
        WHEN 'assigned' THEN 'Assigned' 
    ELSE 'Unknown' END) AS __group__,
 
    id AS ticket, summary, component, milestone,
    t.type AS type, priority, time AS created,
    changetime AS _changetime, description AS _description, owner
 
    FROM ticket t
    LEFT JOIN enum p ON p.name = t.priority AND p.type = 'priority'
    WHERE reporter = $USER
    ORDER BY (STATUS = 'accepted') DESC, (STATUS = 'assigned') DESC, 
        (STATUS = 'new') DESC, CAST(p.value AS int), milestone, t.type, time

2. All Tickets Owned by Me

This report is useful to track your own status. See your active tickets, new ones and once that have been closed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

SELECT p.value AS __color__,
    (CASE STATUS WHEN 'accepted' THEN 'Accepted' 
    WHEN 'closed' THEN 'Closed' ELSE 'Owned' END) AS __group__,
 
    id AS ticket, summary, component, version, milestone,
    t.type AS type, priority, time AS created,
    changetime AS _changetime, description AS _description,
    reporter AS reporter
 
    FROM ticket t
    LEFT JOIN enum p ON p.name = t.priority AND p.type = 'priority'
    WHERE owner = $USER
    ORDER BY (STATUS = 'accepted') DESC, (STATUS = 'assigned') DESC, 
        (STATUS = 'closed') DESC, CAST(p.value AS int), milestone, t.type, time

3. Assigned and Accepted Tickets by Owner

Such reports are very useful to track the workflow of all the Trac contributors on one page.

1
2
3
4
5
6
7
8
9
10
11
12

SELECT p.value AS __color__,
    (CASE STATUS WHEN 'accepted' THEN 'Accepted by: ' 
        WHEN 'assigned' THEN 'Assigned to: ' END) || 
    owner AS __group__,
 
    id AS ticket, summary, component, milestone, t.type AS type, time AS created,
    changetime AS _changetime, description AS _description, priority, reporter
 
    FROM ticket t
    LEFT JOIN enum p ON p.name = t.priority AND p.type = 'priority'
    WHERE STATUS = 'assigned' OR STATUS = 'accepted'
    ORDER BY owner, CAST(p.value AS int), t.type, time

4. Active Tickets by Milestone

Track the overall progress of the development team, see what’s left to do until a certain milestone is reached.

1
2
3
4
5
6
7
8
9
10
11

    SELECT p.value AS __color__,
    'Milestone '||milestone AS __group__,
    id AS ticket, summary, component, version, t.type AS type, 
    owner, STATUS, time AS created, changetime AS _changetime,
    description AS _description, reporter AS _reporter
 
    FROM ticket t
    LEFT JOIN enum p ON p.name = t.priority AND p.type = 'priority'
    WHERE STATUS <> 'closed' 
    ORDER BY (milestone IS NULL), 
        milestone, CAST(p.value AS int), t.type, time

5. Closed Tickets by Owner

Finally, this report is extremely useful to track progress by owner. Shows clearly what the contributors have been up to lately.

1
2
3
4
5
6
7
8
9
10

    SELECT p.value AS __color__,
    owner AS __group__,
    id AS ticket, summary, component, milestone, t.type AS type, 
    time AS created, changetime AS _changetime, description AS _description, 
    priority, reporter
 
    FROM ticket t
    LEFT JOIN enum p ON p.name = t.priority AND p.type = 'priority'
    WHERE STATUS = 'closed'
    ORDER BY owner, CAST(p.value AS int), t.type, time

Sweet eh? As you can see this is pretty much basic stuff and there are tonnes of other useful reports that have to be created, but these are the essentials. If you’ve got your own reports to share, you’re welcome via comments ;)

Happy project managing!

Related posts:

1. Customize Posts Order in WordPress via Custom Fields

Davis Got 4500 Followers in 6 Months

When the new Retweet API came along, I wrote an RT module which uses the Twitter Search API to find relevant tweets and users, then retweets those messages or just somehow interacts with a user. As soon as the Twitter Lists API was announced, I started working on the Lists module, which eventually became a simple “sorting-the-tweeps” based on their keywords – web design, design, wordpress, etc. Soon enough, I found out that Lists couldn’t contain more than 500 members (although some glitch made 501 possible). Web design 2, wordpress 2, etc wouldn’t be as fancy. I also tried building a conversation list of tweeps that by any means talked to the robot, but then again, the 500 limit broke all my hopes ;)

There were other modules which I worked on really hard, such as RThx module or Random Buzz, DM Control. Some of them worked, some of them were turned off after a few days (yes, you guessed it – Random Buzz, that really made some noize ;)

So, what did I achieve? Me – nothing. Michael did though, in 6 months he went up to 4500+ followers, while following a little more than 200 people himself, has been featured in ~ 250 lists, sent ~ 55,000 tweets and retweets all based on four keywords (or hashtags) – design, web design, wordpress and jquery. Built 4 lists based on these keywords, 500 members in each. Total list followers is a little less than 150 (which is quite good actually).

For comparison take a look at my account – (@kovshenin), in a little bit more than a year I got ~ 1700 followers. It took Michael a couple of months to reach that. The chart below illustrates the followers growth during the last three months. Human (me – blue) vs Robot (Michael – red). Yeah, I added a new module in mid December ;)

I manually logged into Michael’s account recently to check out how he’s doing, and I was kind of surprised to see that people really are talking to the guy, thanking him for retweets, asking him for further reads, wishing him a great day and handing over some coffee. Michael doesn’t usually reply to these and he’s a little bit shy sometimes, besides, he never drinks coffee ;)

A few days ago I decided to give Michael a rest, so tuned his backend to a new Twitter account with a few different settings, especially in timing. I’ll be switching to other keywords and feeds in the next few weeks. So let’s see if he’s as good as Michael, or perhaps better? ;)

I’m not sure what I’ll do with Michael’s account. TweetValue said it’s worth over $5k … anyone? ;) Or should I just throw it away.. Or run a contest for his password? …

Related posts:

1. Twitter Robot in PHP: Twibots Draft
2. Compatibility: Twitter Tools & Twitter Friendly Links
3. The Twitter API v2 Transition

1
2

<a name="bookmark"></a>Bookmark Text <!-- Bad! -->
<a name="bookmark">Bookmark Text</a> <!-- Good! -->

Keep that in mind ;) Cheers!

Related posts:

1. MySQL Charset Issues
2. Powered by Delicious: Web Design, Coding & HTML5

Facebox: Creating Facebook-like Dialogs

The problem with Facebox is the lightbox placement. The dialog itself is placed in the center of the page horizontally with a preset margin from the top, which looks good, but what I did notice is that the box containing the loading icon is being placed somewhere to the left part of the page. Well at least on Firefox 3.5.7.

I couldn’t help but noticing that FamSpam and StaffTool are using a different set of functions and styles for the lightbox placement and copying them into my code solved the issue.

The two functions are called getPageScroll() and getPageHeight() and are marked as quirksmode.com inside the code. The #facebox style in the CSS lacked a width: 100% which seems to have solved the issue for now. There’s also a certain overlay in the original version which includes an interesting IE6 hack:

1
2

height: expression(document.body.scrollHeight > document.body.offsetHeight ?
	document.body.scrollHeight : document.body.offsetHeight + 'px');

The versions at Stafftool and FamSpam however don’t mention any overlays in there code. Pretty messy, huh? Well, other than that, the plugin is very lightweight and cross-browser, works well in IE and closes the popup when pressing Esc, which unfortunately has to be hand-coded in other versions of the Facebook-style dialog boxes.

Grab the code at GitHub and enjoy: Facebox for jQuery.

Related posts:

1. Using the jQuery Lightbox Plugin in WordPress
2. Extending the jQuery Lightbox Plugin: Custom Link
3. Inspired: Javascript & jQuery Love

Neat Transitions with the jQuery Cycle Plugin

Pager is nothing but a few links next to your cycling block with page numbers, which switch the cycle upon click. It’s very useful when you have to create, say a list of services a company provides, with sweet lightboxes (don’t confuse with the Lightbox plugin), perhaps with some images, cycling through their descriptions, yet we’d like our visitors to be able to switch through the services manually, without having to wait. This is exactly what the Pager transition does, but hey, who the hell would want page numbers instead of their services names?

This is where pageAnchorBuilder comes in, and it’s not quite obvious what has to be done to make this work. According to the jQuery Cycle documentation it’s:

pageAnchorBuilder – callback function for building anchor links: function(index, DOMelement)

So here’s a demonstration of how this would work. Let’s setup a quick cycle, with a few options. Perhaps you’ll need more than I listed below ;)

1
2
3
4

jQuery('#fade').before('<div id="nav" class="nav"></div>').cycle({
	pager: '#nav',
	pagerAnchorBuilder: paginate
});

So paginate is a callback function which takes two arguments, the index and the DOM element. Using the index will work just fine. Let’s see how this works with text:

1
2
3
4
5
6

function paginate(ind, el) 
{
	if (ind == 0) return '<span>Service One</span>';
	else if (ind == 1) return '<span>Service Two</span>';
	// and so on
}

I think that’s pretty straightforward once you understand how it works. Let’s try some images:

1
2
3
4

function paginate(ind, el) 
{
	return '<img src="http://whatever.com/services/service' + ind + '.jpg" />';
}

So name your images service0.jpg, service1.jpg, etc. And my favourite, CSS classes:

1
2
3
4

function paginate(ind, el) 
{
	return '<div class="service' + ind + '"></div>';
}

Then just add a few .service0, .service1, etc. classes in your stylesheet, voila! Hope that helps, and don’t forget about the other useful options. Cheers!

Related posts:

1. The Web Development Cycle Explained
2. jQuery in WordPress: wp_enqueue_script
3. Extending the jQuery Lightbox Plugin: Custom Link

Click here to view the embedded video.

Thank you for your support and voting at WordPress.org ;)

Related posts:

1. Plugin Development: Technical Support for WordPress
2. Video: Twitter Friendly Links for WordPress
3. Thickbox and jQuery in WordPress 2.8

Provide Support to Your WordPress Clients

Yeah, with this plugin you’ll get rid of the annoying phonecalls and tweets. Technical Support for WordPress (formely called Bug Reporting for WordPress) adds a dashboard widget to the WordPress admin panel, where your clients could file a support ticket in only a few clicks! Pick a topic, write a title, describe the issue, send. Voila! You will receive the filed report by e-mail, well formatted and with all the necessary details. You can then take action, and finally reply to the e-mail when everything’s done.

This is one side of it. The second side is that the plugin is totally customizable, the subject and message format are powered by short tags, the topic list is customizable, and of course the company (provider) name and email address. This means that you can include a certain tag, keyword or whatever to the subject line, say “#CompanyName” then filter that in Gmail or whatever, and make different clients go to different folders. There, no more junk in your Inbox!

Okay there’s a second side, this means that there should be a third. What about branding? The plugin permits you to have a provider name, provider URL and a provider logo! Which will be displayed in your clients’ dashboards and will link directly to your website. That way, your clients will keep you in mind, 24/7! Ok, kidding, but it’s really good for branding..

Now, I know you already want this and can’t wait to download it, but hey, the request hasn’t been approved by the WordPress.org Plugin Directory yet, so as soon as it does, we’ll go live. Meanwhile take a look at these screenshots:

 

Looking forward to your comments, feature requests, etc ;)

Related posts:

1. Behold! Technical Support for WordPress
2. WordPress: Extending the Contact Form 7 Plugin
3. New WordPress Plugin: The Foller.me Widget

Adding the Source URL Module to Contact Form 7

First of all I’d like to note that he plugin is very well written, it’s very, and I mean VERY flexible, and only due to its flexibility we’re allowed to extend its functionaltiy. Of course Takayuki’s probably missed some filters and hooks that other plugin and theme developers would love to see, but the modules directory is good enough, despiting the fact that it’ll probably be erased and rewritten after an ongoing plugin update.

Now, suppose you have designed a placed a contact form in your sidebar as a widget, using the Contact Form 7 shortcode. It’s got all the necessary fields, AJAX powered form, Akismet spam check & so on. But we’re missing something. Contact Form 7 is located in your sidebar, which means that you’re displaying it on most (if not all) of your posts and pages. Now when somebody writes a message via your contact form, you’re left guessing which page the visitor was viewing while typing.

This may be crucial in e-commerce situations, say you’re selling books from your blog, and a visitor contacts you to ask “who’s the publisher of this book?” or “how many pages does this book have?”. So you received an e-mail and you have no idea which book is being mentioned. You’re lucky if you only work with one publisher, or all your books are 100 pages long ;)

Anyways, let’s create a new file in the modules folder of the plugin, and call it sourceurl.php:

1
2
3
4
5
6
7
8
9
10
11
12

wpcf7_add_shortcode('sourceurl', 'wpcf7_sourceurl_shortcode_handler', true);
 
function wpcf7_sourceurl_shortcode_handler($tag) {
	if (!is_array($tag)) return '';
 
	$name = $tag['name'];
	if (empty($name)) return '';
 
	$html = '<input type="hidden" name="' . $name . '" 
		value="http://' . $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"] . '" />';
	return $html;
}

This is very easy to understand once you’ve read (and understood) what’s written in the other modules. Try to take a look at text.php for a while, it includes the code for both text and e-mail fields. I copied some of the code for the text fields, simplified it a little and removed the validation process (why validate our own URL?), and voila, 12 lines of code ;)

Save the file and go to your Contact Form 7 settings in your WordPress admin panel. Select the contact form you’d like to add source URL to and in the part where it says “Form” add the new short code (sourceurl) and give it a name (thesource):

1

[sourceurl thesource]

Now you can use “thesource” in your Mail part of the contact form settings, say:

1

Source URL: <a href="[thesource]">[thesource]</a><br />

Then look for the new Source URL in your e-mail ;) So if you’ve used more than one contact form on several different pages, just to distinguish them in your emails, you can merge them into one now. You can use a similar way to add other interesting data to your e-mails such as, say the user’s IP address for instance, browser capabilities, etc.

Related posts:

1. Extending the jQuery Lightbox Plugin: Custom Link
2. Give WordPress the iPhone Look: wpTouch Plugin
3. Plugin Development: Technical Support for WordPress

Drop that phpMyAdmin Stuff, it's for Kids! ;)

Most of you probably used the MySQL GUI Tools bundle, which is very similar to what phpMyAdmin is – database tweaking, user management, structure design, query builder, etc. Browsing up to the usual MySQL GUI Tools place a few days ago, I encountered the following message:

Users of the MySQL GUI Tools Bundle should plan to upgrade to MySQL Workbench. MySQL Workbench provides DBAs and developers an integrated tools environment for:

• Database Design & Modeling
• SQL Development (replacing MySQL Query Browser)
• Database Administration (replacing MySQL Administrator)

So we’re now forced to upgrade to MySQL Workbench. Honestly, for a moment there I though that it’s just a naming issue, and that MySQL GUI Tools has gone so far, that the guys from Sun Microsystems decided to ship the bundle as a single product – MySQL Workbench, but I was wrong. Browsing the MySQL Workbench website I noticed the archive, which dates back to Novermber 8th, 2007! So it seems that they’ve just merged the two pieces.

MySQL Workbench is far more professional then the GUI Tools, but may be complicated at first sight. And the most funny thing about it is that the MySQL GUI Tools leads to a page to download the 5.1 community version of MySQL Workbench, which unfortunatelly does not have all the promised features (SQL development, data modelling, server administration), and there’s no home screen at all, which is shown on each and every screenshot related to the move!

I thought something was wrong, so I went back to the Workbench homepage, browsed the blogs, forums and downloads. It turned out that 5.2 is the one we were supposed to move to, but it’s still in beta, thus hidden in the downloads. After installing MySQL Workbench 5.2 I finally managed to get to the promising home screen, a little bit fancier than 5.1, and very similar to what we used to see in MySQL GUI Tools, plus the improvements.

Here are a few screenshots:

 

So I hope to see the 5.2 release very very soon, and, oh come on, drop the phpMyAdmin stuff, that’s for kids ;)

Related posts:

1. MySQL Charset Issues
2. Foller.me: MySQL Tweaking & Optimization
3. Cloud Tips: Backing Up MySQL on Amazon EC2 to S3