Next I had a cheap “dedicated server” from ServerPronto. I had this server for years. It was supposed to be located in Florida, but it was actually located in Panama. I had very different experiences with this server than my friend who had recommended ServerPronto. He got a server that was actually located in Florida. My Panamanian server was constantly crashing. I would have to contact customer service for a reboot and then wait. They would blame the trouble on their service provider. It grew to be quite frustrating.

As List Central got closer to being ready for release it became quite clear I would need a better hosting solution. After much research and review reading I decided to go with Linode, and boy, am I ever glad that I did! I absolutely love Linode!

List Central is built with mod_perl, thus I need full root, ssh access to my server to set it up properly, and have the ability to restart the apache server when ever I make changes to the code. My VPS (virtual private server) is a piece of a BIG server that Linode sections off and leases to me. Everything about it looks and acts like a dedicated server. Linode’s interface for managing your VPS’s is fabulous, letting you reboot your VPS from a web interface yourself. No more waiting for customer service for me! In addition they give you a few graphs to tell you about the recent load on your server. But the best part is the price! I now have 2 VPS’s from Linode, one for List Central production, and the other for development, with a few Wordpress blog on each as well, and I am paying the same that my “cheap dedicated” server cost me! Love it!

As List Central grows, my VPS can easily grow with it. For all these reasons, and more, I am likely to be a very long-term customer of Linode!

The original ranking algorithm took too much into account, and didn’t handle ageing very well. Rather than fix what I had, I hit the streets of the wide web to research what others were doing for their social ranking algorithm. I thought this might be a difficult task, as I thought the ranking algorithms of the world would be tightly guarded trade secrets, but there is actually a wealth of information on the topic.

I easily found the Reddit algorithm, and Paul Graham’s algorithm for Hacker News in HN threads. The post  How to build a Popularity Algorithm you can be proud of at the linkiblog was super helpful as well.

I ended up implementing both the Reddit and the Hacker News algorithms to test out which worked best for List Central. Both were functions of points (X) and time. I had to decide how to get X for lists. Both Reddit and HN use a thumbs up/thumbs down system for point calculation. List Central uses a 5 start ranking system. I came up with a mapping of star ratings to points, with 5 stars being the most, and 1 star being the least. Both the 1 a 2 star ratings have negative values when mapped to points, to enable users’ expressions of distaste to have the intended effect on the list ranking.

With my X in hand, and two algorithms implemented, I let them run to see how they preformed. I was pleased with both the algorithms, and ended up keeping a modified version of the Reddit algorithm for List Central.

The new popularity algorithm took away the need for the time frames List Central used to have on the main page, similar to how Digg is implemented. I only required the one tab “popular”. I added to new tabs to give more points of access to the lists: “new” – ordered by date published and “active” – ordered by an activity measuring algorithm that factors in list hits and comments.

All in all I am pleased with how the new ranking algorithm worked out, and am grateful for the lessons on wheel re-invention the process taught me.

With the help of John Oxton I was able to figure out how to get the flash content to stay behind my floating html content. Essentially it took two steps:

1. Add a wmode parameter to the embed code, as well as a wmode attribute to the embed element, both set to transparent. The Perl code I used to do this is:

$EmbedCode ~= s/<embed/<param name="wmode" value="transparent" \/><\/param><embed wmode="transparent" /;

2. Set the z-indexs in the CSS, giving my floating HTML content a higher z-index than the div containing the flash content.

2 easy steps, and voila! Everything is layered just how I intended. Beautiful!

Enter: server monitoring!

There are many server monitoring services available. Since I’m bootstrapping this List Central business, I have to keep all bills as low as possible. The lower the better, and free is best. With cost control in mind I went out to find a server monitoring service that fit my budget. There are many free ones out there, and I tried a couple. One I tried, Internet Supervision, was pretty awesome with a free trail that provided checks of my websites every 15 minutes. But as all good things come to an end, so did my 90 day trail, and checks of my web site slowed down to once a day.

Luckily a friend had just recommended Montastic. With the tag phase “The free website monitoring service that doesn’t suck”, Montastic doesn’t lie. For the low, low cost of zilch, Montastic will check any page you like, up to every 30 minutes. When Montastic discovers your website is down, it will email you about it. Combine this with a push email smart phone, and you’ll always know, with in 30 minutes, when your site goes down. They also supply an RSS feed of your servers status, for those that host their email on the server they want checked. Of course, you can up grade your Montastic account to get them to check your site up to every 5 minutes. This fancy account is quite reasonable, at $5 a month Motastic with check up to 15 websites for you, every 5 minutes. That’s pretty sweet deal, which I will be signing up for when List Central is getting significant traffic.

Thank you Montastic, for not sucking!

List Central has been under going some major changes as a result of the feedback I received from the private beta release. I learned so much through this process about what makes sense for other people on the web, and how to balance what I think List Central should be, what my users want it to be, and what I am capable of producing. I am very proud of how List Central is turning out with these new changes, even though the progress of improvement has moved much slower than I wanted it to.

Currently I am adding a little more polish to List Central, dotting the i’s and crossing the t’s. In a matter of days I will be announcing List Central being open for everyone to use and enjoy, and will then shift my focus to the promotion side to get List Central the ton users it deserves. I am very much looking forward to seeing others enjoy List Central as much as I do. Watch for the announce me the next week, or at the latest, the week after this.

When I was implementing the dragable popup form feature I was pleased at how easy it was to use mooTool’s Drag.Move. My little form was easily moved to anywhere in the browser window, just as I intended. A problem arose when I tried to use the form inside the dragable element. The input elements of the form were not clickable, I could not get them to have focus, as if they were behind an invisible layer, which is actually what was going on. The form elements inside the dragable div they sitting in were not clickable, because they were dragable! Ack!

Happily I was able to find a solution for my problem: the dragable element required a handle.

The above image shows the Drag.Move handle in the upper right corner of the edit list item form div. You cannot move that dragable element unless you grab it by the handle, the move icon. Using a handle frees up the rest of the element for other clickable elements, like a form.

The JavaScript for including a handle in your Drag.Move element is as follows:

new Drag.Move('dragableDivID', {handle: 'dragHandleID'});

and the HTML, with some CSS:

<style>
.dragHandle{
    background:transparent url(/images/move.png) no-repeat scroll 0 0;
    cursor:move;
    float:right;
    height:30px;
    margin:15px 15px 0 0;
    width:30px;
}
</style>
<div class='dragableBox' id='dragableDivID'>
     <div class='dragHandle' id='dragHandleID'></div>
     <div class='dragableInner'> The content goes here</div>
</div>

In looking for this solution I found this great tutorial series by Consider:open called 30 Days of mooTools.  The entire series is very well done. Web developers at any level are likely to learn something new about mooTools there. Check out thethe tutorial on Drag.Move from the series that helped me out.

I spent a great deal of time trying out different WYSIWYG editors for List Central. I found many neat ones, but CKEditor was the one that gave me the fewest headaches in integrating the editor into the highly dynamic interface of List Central.  CKEditor is a full featured editor that offers a wealth of features that are not needed on List Central, which makes the editor a little heavier than I would like, but it’s a fair trade off for an editor that works properly.

One thing that I didn’t like about CKEditor is the hideous dialog popup for adding links. It is aesthetically ugly, and offers far too many options. While I certainly wouldn’t be taking away the ability to add links in editor, I couldn’t keep the functionality the way it is, I’m far to picky to let something that looks like this:

to get passed me. Call me shallow if you will, but I had to make my own CKEditor plugin for adding links that would use the KISS (Keep It Simple Stupid) design principle and have the List Central asthetic.

CKEditor is still a young piece of open source software, and lacks proper documentation. Be careful with this, as CKEditor is the next version of FCKEditor, which is very different. Following the FCKEditor documentation is likely to lead you astray. I used the following resources around the web to figure out how to make my plugin work:

• Tommed explains how to make a CKEditor plugin by building a better image uploader
• Ajithmanmu explains how to create a CKEditor plugin by building a simple add link plugin.

Happy plugin making!

I recently started using FX.Slide in the next iteration of the List Central interface. It lets the user open and close “sliders” (div’s with content in them) as they want them. Check out the < a href="http://demos.mootools.net/Fx.Slide">mooTools demo to see FX.Slide in action.

I had one little problem with Fx.Slide though. The problem was that I wanted to be able to dynamically add content to an Fx.Slide, changing the height of the slider div after it has been opened. To my dismay, the implementation of Fx.Slide set the height of the div to specific numbers in pixel to achieve the vertical slider effect. This means that any content I added to the bottom of the div after it was opened would not be shown. In order for the height of the slider div to remain dynamic, I needed the height to be set to “auto”, not a specific number.

I had to figure out a way to maintain the the div’s ability to change in height while still using FX.Slide. I did some fiddling in mooTools source to try to achieve the effect I desired. I changed where FX.Slide set the height of the div to “auto”. After trying it out, I was astonished that it worked! I had moved on to some other development when I realized that my change to the mooTools source brock the fluid motion of my slider. It now opened all choppy and jumpy. It was no longer pleasing to the eye. I had to put the source back the way I found it. I may have learned some about the inner workings of mooTools though the process, but really, messing with the framework’s source is a path to trouble.

As with many problems, this one’s solution didn’t come to me until I put the problem away for a while, and worked on other things. The solution then came to me, and like many other solutions, it seemed so simple, once I knew it.

The trick to maintain dynamic height on a Fx.Slide is to add an onComplete function on to the slider that sets the height of the slider to “auto” if the slider is open, like this:

var formSlide = new Fx.Slide('FormSlider', {
        onComplete: function(){
            if(this.wrapper.getStyle('height') != "0px"){
                // Check if the slider is open
                this.wrapper.setStyle('height', 'auto');
            }
        }
    }).hide();

That’s it! It works like a charm now, just as I want it to. So much trouble, for such a simple solution!

I expect that this solution would work the same on the width for horizontal FX.Slide’s, though I haven’t tested it.

In looking for the right lightbox solution for List Central, I found this awesome, interactive comparison of different lightbox clones by PlanetOzh.com. It allows to to specify the Javascript framework you want as well as the features you need, in order to narrow down your search for the perfect lightbox.

With the Lighbox Clone comparison’s help, I decided to use Phatfusion’s super slick Multibox. But, as with most things in web development, it wasn’t that simple. The Phatfusion Multibox is built for MooTools 1.11. I need to use MooTools 1.2 for other features. Luckily I found Multibox for MooTools 1.2 by Liam Smart. It works great!

There is a bit of a trick with Liam’s Multibox that is yet to be documented properly. If you want to be able to close an open multibox from a button inside an open multibox, or access document elements or Javascript variables from the main page, from within a multibox opened via the AJAX method, you must use the Javascript reserved word “top”, such as:

top.myMultibox.close();

Thank you Phatfusion and Liam Smart for building Multibox and Multibox for MooTools 1.2!