We’ve all been there. Somebody asks if you can take a look at their website that has been stagnant for a while. Something small needs to be changed. You feel up for a challenge, so you dive in. What you find is a mess. It’s really nobody’s fault. Things evolved over time, different developers and designers have done their thing at various times. Nobody meant any ill will, everybody just did their best. But here you are.

Those problems come in many forms, but the one that pops up the most is the shared server that’s running a website for that shop next door. Over the years the owner became more and more reliant on the site. Maybe it contains his master inventory, maybe his contact database. It started out as nice novelty that nobody depended on, but now it’s quickly becoming mission critical.

So there you are, you’ve just opened the public HTML folder in your FTP client and you’ve got PHPMyAdmin opened in the browser.

This is my current action plan, feel free to add and suggest tools.

Backup the entire site

For the love of god, make a backup now! Chances are good that you are looking at the only copy of the site in existence. If anything happens with the server, if you mess up something small, you’re going to be very very sorry.

Both cPanel and Plesk, the most popular domain control panels offer backup solutions out of the box. They are not perfect, but they allow you to create a full dump of the entire site. If you can schedule a daily backup, that’s a plus. If you can send the backup somewhere off site, another plus.

If you have shell access to the server, there are a whole slew of other tools available that may or may not be easier to use than the above.

Whatever you do, also check the backup. Does it contain a database dump? Does it contain all files? If you’re going to be messing with DNS and e-mail, you may want to check if that’s backed up too.

You’re now at a point where you can start developing/debugging with some confidence. It’s not perfect, but at least you have something to fall back on. I’d take it at least one step further.

Get the files under version control

If you’re going to be making multiple changes for multiple different tasks, you’re going to want to have all the code under version control. The easiest way: just put the entire public HTML folder under version control. You may be versioning too many files there, but at least you’re not missing anything.

One typical issue that pops up is the fact that not every one is going to be using version control. For instance, even the simplest WordPress blog can cause issues, because it is possible to edit some of the files from within the administration console.

If you have shell access, you could install and use version control on the server itself. But that doesn’t work for shared hosting.

I haven’t found the perfect, automated, solution but there are a few tools out there that allow you to view the difference between an FTP directory and a local on. Beyond Compare 3 is a pretty good one, once you get past its archaic interface.

You’re now at a pretty good place. Major disasters will be solved by the backup and smaller issues can be resolved by rolling back the change that caused them.

There’s still one wildcard: the database. Especially if your work involves structural changes to the database, you may want to look into …

Version control for the database

Few people do database version control and when it happens, it doesn’t always work quite right. But if you want to feel save doing that normalization operation on a few tables, there’s no way around it. You have to get the database in your version control system.

Start here and if you want to take it further, there have been many tools written since that post that will make your life easier.

(Unit) Test the code

Depending on the language of the application, you may just automatically be writing tests, even before you considered creating a backup. If it’s a PHP site however, chances are nobody has thought of this before.

You may think testing isn’t important for your particular application, but do me a favor: get at least one test in there, so that you’ve got the structure set up. If you ever add new code, you will be much more likely to add more tests.

Start the test suite with a single test and let it grow from there.

Integration/GUI testing & Continuous integration

If you get through the previous steps, you’re doing better than most. Automated GUI testing, a continuous integration server or even a continuous deployment environment, etc. it’s all icing on the cake. But if you’ve got the time and budget to set this up, you’re going to be a very happy developer down the road.

Conclusion

Many sites out there are still alive only by the mere fact that nothing bad ever happened until now. If you’re going to be updating such a site, chances are good that you will be held responsible if anything goes wrong. Even if it is completely beyond your control. The above steps will make sure that you are prepared and that you can start refactoring the code without worrying.

This is an evolving article, I will be updating it as I go along. Tips are more than welcome.

(image credit)

NEW: $199 for a Node.js web app by Streamhead

Over the last few months, I’ve developed three plugins for Tristan Kromer of GrasshopperHerder.com. He has gracefully donated these to the community, so now they are available to all: Easily create tweetable text, manage ads and monitor their performance, integrate KissMetrics. There’ something for every one.

These are the first 3 plugins I created that are publicly available. It doesn’t happen a lot that some one who pays for development decides to make it available to every one. So don’t forget to thank Tristan.

TweetHerder

From a technical point, this is the easiest plugin of the three. But I think it will be the most popular. It allows you to easily add “tweet this” buttons to quotes in your posts. Like this one:

If you have a WordPress blog, you should try the TweetHerder plugin.

KissHerder

This plugin allows you to add the KissMetrics code to your blog. It is different than the other plugins available, because it instruments many of your blogs functions. For instance, it will send events when a user enters a comment. There is also code available for tracking Facebook, Google+ and Twitter buttons. Check the FAQ for the details and if you have something that isn’t supported yet, please let us know.

AdHerder

Easily the most complicated plugin of the 3, this one allows you to define different adds and run A/B tests. It tracks user behavior and you can configure the plugin so that a user does not get to see an ad again if he has already clicked on it.

There are many options and it requires some tweaking to get the most out of it, but it is very powerful and the results can be very enlightening.

Due to its nature, it requires a little power from your blog server. So I would not suggest it to blogs that are already flirting with the limits of their shared hosting plan. Any one on a VPS or dedicated server should be fine.

Feedback

If you try any of the plugins. We’d love to hear from you. Is something not clear? Is there a bug? Do you like it? Let us know.

NEW: $199 for a Node.js web app by Streamhead

Although not as widely known as, for instance, WordPress, Boonex’ Dolphin is used on many private community sites. It’s no secret that it is a hit for any kind of dating site, but it can be adapted to any community you want. In this regard, it is a pretty cheap alternative to Ning.com.

Dolphin can be extended through modules, however the documentation is sorely lacking. The tutorial is a good start, but what follows next took me a lot of backtracing and debugging of existing code.

The Spy Module

The Spy module is a popular Dolphin module that allows a user to track the activity of his friends and other users. Although it appears to be popular, it is completely undocumented. This YouTube movie is the best I could come up with.

Obviously, if you are to try what follows, you need to activate the Spy module (it comes prepackaged with Dolphin)

Integration

Lets say you have an existing module, and want to see activity from your module on the Spy screens. Here are the different steps you need to take (see the end of this post for a fully example):

1. BxDolAlerts

Use BxDolAlerts for every action that you want to track. This has the added benefit that your module will nicely integrate with all other modules that use alerts, not just the Spy one.

You give an alert as follows:

1
2
3

bx_import('BxDolAlerts');
$alert = new BxDolAlerts('my_module_unit', 'action_name', $objectId, $memberId);
$alert->alert();

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

function install($aParams) {
    $aResult = parent::install($aParams);
    if($aResult['result'] && BxDolRequest::serviceExists('spy', 'update_handlers')) {
        BxDolService::call('spy', 'update_handlers', array($this->_aConfig['home_uri'], true));
   }
    return $aResult;
}
function uninstall($aParams) {
    if(BxDolRequest::serviceExists('spy', 'update_handlers')) {
        BxDolService::call('spy', 'update_handlers', array($this->_aConfig['home_uri'], false));
    }
    return parent::uninstall($aParams);
}

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

function serviceGetSpyData() {
    return array(
        'handlers' => array(
            array('alert_unit' => 'my_module_unit', 'alert_action' => 'action_name', 'module_uri' => 'my_uri', 'module_class' => 'Module', 'module_method' => 'get_spy_post')
        ),
        'alerts' => array(
            array('unit' => 'my_module_unit', 'action' => 'action_name')
        )
    );
}
function serviceGetSpyPost($action, $objectId, $memberId) {
    $spyPost = array();
    switch($action) {
        case 'action_name' :
            $spyPost = array(
                'lang_key' => "action_name was executed"
            );
            break;
    }
    return $spyPost;
}

Full Example

If the explanation was not enough for you and you’d like to see a fully working example, I also offer a full module project that you can use as a basis to work on. It does not contain any kind of additional code. Everything in there is shown in the article. It’s just conveniently all put into one place.

Future updates might include internationalization (i18n), if there is interest. Please also see my article on why I charge for some things.

NEW: $199 for a Node.js web app by Streamhead

One question many small business owners struggle with is how much to spend on software. Should you get existing software off the shelf? Open Source or proprietary? Or should you invest in custom development? But how much does that cost and is it worth it?

Many of the smaller companies I’ve worked with over the last year have similar problems. At some point they decided they needed a website and just went with whatever their cousin recommended. This wasn’t a bad choice, because the site has brought them new clients and kept them in touch with existing clients.

In short: the site has made them money.

Programmer’s and lean startup aficionados would say that their minimum viable product has validated their assumptions.

The other side of the coin, is that a site like this usually requires a lot of manual maintenance. So now the business is at a point where they want to invest in the improvement and the expansion of the website.

But what to do?

Lets study a fictional example: Huey Bobbie’s company “Server Certified Studios” has a website containing a few modules:

• A content management system that was created by his nephew as a homework assignment. It works, but for every update to the site, Huey needs to figure out what file to change and if he makes even the smallest error, the entire site goes offline.
• An open source application that manages his mailing list.

Calculating expenses

Huey’s expenses for the site are:

• A shared hosting account and a domain name. For about $150/year you can get a decent package deal.
• Initial programming and template for the site. Those are sunk costs, so they won’t play into any calculation here.
• Every month Huey needs to add a few products to the site, add a bunch of news items and update one or more page. Writing all of those things takes about 1 hour weekly. But because he has to search through the files and be very careful with the syntax, this takes him another 1 hour weekly. Lets assume Huey, as a business owner, values his time at about $100/hour (which is conservative, he could be doing other stuff to make more money).

Everything combined, the website costs Huey on a yearly basis:

$150 + 50 (working weeks) * $200 = $10150 / year

I think this is a fairly realistic number of the cost of a typical small business website that is maintained regularly.

Profit

For the sake of argument, lets say Huey has calculated that the site is generating a revenue that is exactly double of what it cost him: $20300 / year.

Or the site is making a profit of $10150 / year, or a 50% profit margin.

Just to make this more concrete: $20300 means 203 customers buy $100 worth of product over a year. Or about 17 customers find Server Certified Studios through his website. Not at all impossible.

Room for Improvement

That’s not a bad extra profit to add to the bottom line. But lets see how we can do better.

For instance, lets believe in magic and assume there is no additional work required to get a news item that is written on the website. So Huey only need to write 1 hour / week and whatever he has written magically appears on the site.

In that case, the website cost is:

$150 + 50 * $100 = $5150/year

The profit is $15150 or a margin of 75%. That’s huge improvement!

But lets try something more realistic. We automate the website a little and improve it’s administrative interface. Now Huey only needs an hour each month to update the site.

The cost: $150 + 50 * $100 + 12 * $100 = $6350 / year

That’s $13950 profit or a margin of 69%. A nice increase.

Getting There: Investing

If Huey wants to recoup this improvement in a year. The investment may not be over $3800 (this is the additional profit over a year: $13950 – $10150)

Given the size of this website, $3800 can buy a lot. A few example investment opportunities are:

• Find a WordPress theme expert and let them convert the existing site layout to a WordPress theme: Site maintenance will be drastically easier and finding cheap developers afterwards easier (the WordPress dev community is probably one of the most saturated)
• Go on Elance and find a PHP developer that can create a script that automatically converts the input text to the XML format of the site: Not as future proof, but could be even cheaper if you find a good Asian developer.
• Hire a Virtual Assistant to put everything online at about 1/10 the cost of you: Easy to set up, but requires continuous payment.

If Huey would ask me what to do, I would most certainly recommend the WordPress solution. It’s a one time investment that will create a site that is ready for further expansion. And the numbers support it.

Huey will find a WordPress theme company that can create this for $1000. Which will repay itself in 4 months. Furthermore, the WordPress powered site will probably have better SEO than whatever was there previously. Thus delivering even more clients to Server Certified Studios.

Conclusion

If you are a small business owner and feel your website is sucking up way to much of your energy, it’s time to evaluate your options. Write down the numbers and see what kind of time and money you are spending and how much it is making you.

Even small investments can tremendously improve your profit margin and reduce your frustration.

(image credit)

NEW: $199 for a Node.js web app by Streamhead

2011 has been a transformative year for Streamhead. Due to some major work and planning behind the scenes, I haven’t been able to post as much as I would have liked. But all this hard work is about to pay off and you, my dear reader, will enjoy the fruits of it. In 2012, I plan to double down on in-depth articles, tutorials and case studies. All practical hands-on information. Read on for a review of 2011 and my goals for 2012.

Before I start making plans, it’s good to look back at the goals I had a year ago. In 2011, I finally managed to focus on just a few projects and not be so random, which is why I don’t score too good on the goals I set for myself:

1. HTML5, CSS3, etc.: I wanted to learn new enabling technologies for the web. And, in a way, I did, but not like I imagined. I learned PHP and got into the WordPress plugin business (a post on that is forthcoming). I also used Node.js to launch my latest personal project and I’m glad I did.
2. Mobile: Sadly, I wasn’t able to create anything worth showing on the mobile front. Apart from some very small experiments, I got nowhere.
3. Online Marketing: For the last few months I’ve had an Adwords campaign running. It’s been slow learning, but I am getting better at finding keywords and convincing Google my ads are relevant. And I managed to get a site to position 7 in Google for my target keywords in about a month. Nothing major, but I’m pretty happy with this evolution. I haven’t written about any of this, because I feel I got very little to add to the discussion at the moment. That might change, though.
4. Game Modding: A big zero on this one. I launched two small experiments early in the year. There was little interest and I wasn’t convinced myself, so I didn’t promote anything. I did manage to pull of a half-assed ticket to ride clone, which convinced me I shouldn’t invest further in ActionScript. Adobe killing of Flash has only strengthened that opinion.

What you haven’t seen is my search for a sustainable business model for Streamhead and my other projects. Making money with a blog is, for all intents and purposes, impossible. Unless you want to churn out a few long-form articles a day, like Tuts+ (A great resource BTW), you can’t live of of advertising or ebook sales. Furthermore, I realized a full-time writing gig is not my thing. I want to be in the trenches, developing, not writing about developing.

Plans for 2012

Most developers tend to stay away from sites like elance. I did discover that there is good work out there, with good clients that want to pay for quality. And the further my reputation improves, the easier it is to find that work. It’s very easy to phase in and out small projects as time permits.

There is a lot of work out there in the widest possible range of technologies, but it is most profitable to stay focused on just a few. Which is a major pain point for me, so in 2012 I intend to focus on a few core technologies.

Currently, I’m trying to limit my programming languages to Java, JavaScript and PHP. I might try out something related (Groovy, Clojure, Coffeescript), but I’m going to try to not stray too far from the path.

Java

Although there are now other cheap options, I still like the AppEngine platform for Java web application deployment. Libraries, such as Vaadin, are what keep the platform young. However, I do feel that there’s going to be a turning point soon when one of the other JVM languages really goes mainstream. It’s probably not going to be Clojure, maybe Scala?

I also still have that Android in Action book I want to go through.

PHP

PHP is a great source of small project work. It’s an interesting language I will continue to use. However, I am going to narrow it down to WordPress development and possibly a few other applications.

JavaScript

Like it or not, JavaScript is the language of the future. It’s everywhere and there’s no reason why it would go away. And now it has also invaded the server side. I was pleasantly surprised with Node.JS. It’s a very robust programming module that is going to stay in my tool-belt. On the client side, I do hope to get some game programming in and maybe some cross-platform mobile programming.

Non-technical

Of course, 2012 isn’t going to be just programming. I will continue with my Internet marketing efforts and if I feel it’s worth sharing, you’ll be the first to know.

Conclusion

I value input. Do you have a great topic you want me to write about? A question you can’t find the answer to? Get in touch with me and I’ll make it happen in 2012.

(photo credit)

NEW: $199 for a Node.js web app by Streamhead

Over the last month or two, I’ve been very busy with a few projects. And it was about time to present some. I have many more ideas on how to extend ExpensesSpreadsheet, but I thought it wise to first gauge the reaction of people.

It uses the following technology:

• Node.js, the JavaScript event machine that is all the rage now.
• RailwayJS, a Rails-like web framework.
• connect-auth for Facebook integration (and a lot more)
• MongoDB for data storage. Mostly because it was so easy to get started with compared to traditional related databases. But in hindsight, I think it’s an ok choice. I really don’t safe any relations anyway.
• EJS JavaScript templates. Although in hindsight, I think I like Jade better.
• Heroku, cloud hosting done right.

This was my first experiment with Node.js and Heroku and it was extremely enlightening. JavaScript is not my favorite programming language, but it certainly has a way of reducing boiler plate code (stuff I’m really starting to hate in Java). Combined with deployment to Heroku, the time between idea and deployed application is so short, it will make any developer smile.

If your day-to-day life involves lots of Java, you owe it to yourself to try out this stack. It’s not your average hacked together client side JavaScript. It takes a little time to wrap your head around the Node model, but it’s all worth it.

NEW: $199 for a Node.js web app by Streamhead

Since you probably only want to do this in a production environment, I suggest you place this in that configure block.

Before you add any middleware add the following route:

1
2
3
4
5
6
7

app.get('*', function(req, res, next) {
  if (req.headers.host.slice(0, 3) != 'www') {
    res.redirect('http://www.' + req.headers.host + req.url, 301);
  } else {
    next();
  }
});

That’s really all there is to it. Since most frameworks have similar routing options, you should be able to adapt this to other frameworks, such as Geddy.

BTW I’m planning to launch a Node.JS app in November as part of Hacker News’ Launch an App Month.

NEW: $199 for a Node.js web app by Streamhead

Since I launched the PayPal servlet, I’ve had many inquiries and I know of at least 2 production deployments of the code. It was about time that I started handling the project a little more professionally.

The first step in this process was completed last weekend: the project is now a Maven project and the Eclipse specific configuration has been removed. I have decided to make this part of my Powered by Reindeer initiative. Although it can be used completely independent and will remain so, I believe that there are going to be some nice synergies in the future that I’ll want to exploit.

My next step will be cleaning up the actual code. I’m not sure when I’ll get around to it, but this will involve changing the package names a little to be more in line with the Powered by Reindeer structure. If you think there’s a good reason to keep the old names, please let me know. Also let me know if you’d like to get a personal e-mail when the changes will take place.

See the GitHub page for all details.

NEW: $199 for a Node.js web app by Streamhead

If you’ve ever created anything using jMonkeyEngine’s SimpleApplication and you use something other than the American standard QWERTY keyboard, you might have had the same frustration as me: Why isn’t there quick way to switch the keyboard layout? The SimpleApplication base class is supposed to make your life easier, yet there you are, completely stuck with that unnatural keyboard layout. Read on for a quick copy-and-paste solution.

The keyboard mapping that SimpleApplication uses for its camera movement is defined in the FlyByCamera. The mapping is hardcoded and the mapping names don’t even use constant strings. Clearly, no one ever thought about international users. jMonkeyEngine does so many things right, yet on this one, it really misses the ball.

Luckily, with a little searching, it’s fairly easy to redefine the correct mappings. It’s something I now do in all my experiments.

I just copy and paste the following at the start of every simpleInitApp:

1
2
3
4
5
6
7
8
9
10

inputManager.deleteMapping("FLYCAM_Forward");
inputManager.deleteMapping("FLYCAM_Lower");
inputManager.deleteMapping("FLYCAM_StrafeLeft");
inputManager.deleteMapping("FLYCAM_Rise");
inputManager.addMapping("FLYCAM_Forward", new KeyTrigger(KeyInput.KEY_Z));
inputManager.addMapping("FLYCAM_Lower", new KeyTrigger(KeyInput.KEY_W));
inputManager.addMapping("FLYCAM_StrafeLeft", new KeyTrigger(KeyInput.KEY_Q));
inputManager.addMapping("FLYCAM_Rise", new KeyTrigger(KeyInput.KEY_A));
inputManager.addListener(flyCam, new String[] {"FLYCAM_Forward", "FLYCAM_Lower", "FLYCAM_StrafeLeft", "FLYCAM_Rise"});
flyCam.setMoveSpeed(10f);

(Note that I’ve also sped up the movement to more easily move around)

NEW: $199 for a Node.js web app by Streamhead

Whenever you’re proposing a web site or application to a client, showing him what it’s going to look like can work wonders. It avoids confusion and can fix doubts. But how do you show off a website when you haven’t written one line of code and HTML? Wireframe tools and website mocks are the answer. This article compares a few of the many tools available.

In this article I compare:

• Balsamiq. The de-facto standard for creating mocks.
• WireframeSkechter. A new kid on the block, based on Eclipse. The author generously donated a free license for this review.
• Mockingbird. A completely web-based tool.

All three of the tools offer a similar feature set and are all very capable. So if you don’t feel like reading on, just pick one, and I’m sure you’ll be happy.

Of course, if you look closely, there are many small differences that might suite you and your workflow better.

Mockingbird‘s visual style is cleaner and different than most other tools. And the way you can arrange components by snapping them to guidelines and other components is equaled by no other tool. It’s easy to quickly create a well-aligned and well-spaced layout.

Balsamiq  is the most widely known mocking tool. It is popular for a reason. With a solid standard set of components and many ways to extend its functionality through custom components and third party tools, you’ll certainly find what you need. I tested the desktop version, but since this is a Flex application, the online version is exactly the same.

WireframeSketcher has a similar sketchy look as Balsamiq. Which is great way to communicate to your client that these are just temporary mockups. WireframeSketcher’s main selling point is the wiki-like syntax that allows you to deeply customize the standard components, such as the table. My main gripe is the small up and down arrows to navigate through the component library. I know this is a very minor annoyance, but the idea of mockups is to quickly sketch a layout and this held me back somewhat.

None of the three tools have an intuitive way of adding arrows. I like to attach yellow sticky notes to certain areas to explain different parts and have arrows point out the details. None of the tools made this easy.

The following spreadsheet gives an overview of some of the features of the different tools. You’ll notice that they are very close, so in the end it’s probably going to come down to personal preference.

NEW: $199 for a Node.js web app by Streamhead