Welcome back!

Well, hi! It’s been a long time…

Unfortunately on this blog the posting frequency really dropped off over the last year, work just got the better of me! Compounding this, I kind of lost interest in web development issues which was the main topic of the blog and it didn’t feel right to write about other topics on the blog whilst it was still primarily a web development blog.

So what I’ve done now is to relaunch the blog with a new design and software (we’re running WordPress now). I still haven’t worked out what this blog is really going to be about, but we’ll hopefully see as time progresses!

This is in fact the third reincarnation of Cow’s Blog. We started off in April 2004 using Postnuke before relaunching with Geneone in August 2005. And now in February 2008, I’m pleased to switch to WordPress.

Continue reading

User Profile Pages

I’m currently rewriting the user profiles feature of Geneone, my community management system.

To date, the profile pages have been very basic and have been modelled off the profile pages found on forums. Forum profile pages generally just list some interests, show your signature, avatar and contact details.

In contrast, MySpace almost gives you total free realm over your page. You can customize the whole look of the page, add photos, quizzes, videos, music, comments and all kinda random stuff. Myspace is built on it’s user profiles.

With Geneone user profile pages, I wanted to go somewhere down the middle. We don’t want totally stupid customization, crazy colours and animated GIF backgrounds like Myspace, nor do we want the boring, drab profile pages you find on forums.

Additionally, Geneone is designed very differently from most blog/forum softwares – it should be dead easy to integrate other applications. Evolution is a game which was integrated into Geneone around a year ago. It should be easy for Evolution to add game information onto the user profile pages.

Geneone is also designed to be extensible and versatile. On one installation of Geneone, you could run several blogs, a few hundred forums, a few content pages or maybe even a wiki. The profile pages should integrate information from these sources.

I’ve modularised the user profile system and added hooks for extensions and other scripts to add their own fields, customizations, etc. to the profile page. We’ll be replacing the existing Evolution profile system sometime soon with a slightly customized Geneone profile system.

To make the profile pages a bit more interesting and more personal, I’ve introduced "personal pages". With these personal pages, the user has free realm to add photos, links to their favourite websites, a list of interests or whatever their creativity permits! To edit a personal page, you get the same TinyMCE WYSIWYG interface found everywhere else on Geneone.

Example of new profile page 

Old Profile

Example of old profile page 

An example of things which could be possible with the new profile page:

  • Flickr/Delicious/Youtube-stream, etc.
  • Polls and Quizzes
  • Music
  • Buddies List
  • Comments
  • Latest Blog Entries/Personal Blog integration
  • Forum, blog stats

Forum Sparklines

A few days ago I wrote about sparklines which are an interesting way of adding non-intrusive visual information through small graphs. I implemented some sparklines in the Geneone Forum mainly as an experiment but they seem to have been well-recieved (better than I expected) and I believe they are worth developing further.

The following screenshots come from the Evolution 5 Forum which has a different skin from the Geneone default so the actual look of the sparklines on a Geneone forum will be different. All the screenshots are from live data.

Forum View 

Sparkline 

A small sparkline has been added to the right of the "comment count" for each discussion. I thought this was the most logical place as the sparklines were directly related to the number of comments. The sparkline shows the number of comments made in the 7 previous days.

The sparkline has shown some interesting trends. Some discussions seem to have decreased in activity exponentially whilst others fluctuate.

No body has actually gone out of their way to complain about these mini-graphs but some people noted they are quite nice. The graphs certainly add a bit of clutter to the page but they also provide another way of visualizing data so these factors will have to be weighed up against each another.

Further work and investigation:

  • Investigate the best location and placement for the graphs.
  • Investigate the best way to format the graph (line or bar, width of bars, etc)
  • Determine how useful the information is.

Discussion Pages

Sparkline 

In the sidebar, the number of views and comments are shown along with graphs of activity over the last 14 days. These two graphs are pretty unintrusive so I don’t think anyone would have a problem with this information in the sidebar.

Sparklines

Sparklines are a really interesting way of presenting information on a webpage.

According to Wikipedia:

Sparklines are a format developed by Edward Tufte for small graphic charts which can be inserted within text on a page.

Tufte describes sparklines as "data-intense, design-simple, word-sized graphics". Whereas the typical chart is designed to show as much data as possible, and is set off from the flow of text, sparklines are intended to be succinct, memorable, and located precisely where appropriate.

You can see an example of their usage on the Information Aesthetics blog. You can use the PHP Sparkline graphing library which can make it easy to generate some Sparklines.

I think Sparklines are a great way of showing information in cases where a graph would present the information well but the information isn’t really important enough to warrant a large graph. Another advantage of sparklines is that they can appear inline in a passage of text.

Forum 

I decided to experiment with introducing Sparklines a bit by trying to introduce them into a forum. It’s possible that sparklines can show all kinds of stuff such as when posts are made, how active a user is on the forum, etc. I’ve currently implemented them as an indicator of activity in a forum discussion.

Geneone Forum Sparklines

This screenshot is actually photoshopped as I don’t have a large enough forum on Localhost to produce any decent graphs. I’ve pasted a graph using some sample data on top of the blank graphs which I actually get on Localhost. A lot of forums these days will show information such as the number of views but I’ve never particularly found it useful. Several users have been asking for it and it’d be interesting to see whether using Sparklines will make the data any more useful.

Possible uses of Sparklines in a forum:

  • To show a user’s activity
  • To show the "karma" or the number of upvotes/downvotes on a comment
  • To show the activity of a discussion or forum
  • To show the number of people online over the last 24 or 48 hours 

Geneone 0.6.7 Technology Preview

I’ve just released an updated build of Geneone which features all of the modifications and improvements made over the last month.

What’s changed? 

Key changes include:

  • Replacement of Smarty templating engine with Gene_Template
    This means you can now use the more powerful and easier PHP in your templates. Templates should also be simpler to understand.
  • Drafts
    You can now save half-finished blog entries or forum posts to the server and return to them later. More information in the post about drafts.
  • User Interface Update
    In the continuing effort to try to remove all GPL-licensed code from Geneone, I’ve replaced the Crystal SVG icons with icons from the Tango Project. There are also some error message and moderation UI changes.
  • Syndication
    Feeds now use the Atom 1.0 syndication format and blog entries reference the feed URL of the main blog as well as the comment feed.
  • Revisions
    You can now revert to older revisions of a document.

See full changelog.

Download

Geneone is still in a technology preview state. It isn’t even alpha yet, so you should not run it on a production website. This release is unfinished and will contain bugs. There will be no way to upgrade from this version to a later one and pretty much every version has broken backwards compatibility with the previous one.

If your still interested, download it (810 KB).

Blog Update

Just to let you know, there will probably be a big software update (hopefully tonight) on this blog as I upload the last two weeks worth of development work.

  • There may be possible downtime.
  • The URL to the RSS feed will change from rdf.php to xml.php. I’ll leave a HTTP redirect at the old URL. If your feed client doesn’t support redirects, you may be screwed.
  • The format of the feed will change from RSS 1.0 to Atom 1.0. If your client does not support Atom 1.0, you may again be screwed.
  • There will now be 10 entries in the feed rather than 5.
  • There may be errors and/or strange looking pages across the whole of neonDragon.net as there are tons of templates and the chances are I’ll miss something whilst merging the codebases.

This update will bring the codebase up to date and will have some of the improvements described here.

I’m looking at a public alpha of the software in the next few months. 

Geneone: UI, Drafts, Templating

Over the last week or two, I’ve been working on Geneone to revamp the UI a little, switch templating systems and to implement a Drafts system.

UI Updates

As part of the effort to try to turn Geneone into a BSD-licensed software, I’ve removed all Crystal SVG images and replaced them with images from the Tango Project.

Moderate UI 

The full moderate discussion UI has icons and description of what each function does. Commands such as "Move Discussion" should really be lumped in with these options too. Looks a bit wierd with the radio button in between the description and icon but I think it makes it easier to use. I also considered using checkboxes instead of radio buttons.

Notification UI

These new message classes mean there is a more consistant look across the whole application and the messages are more visible and harder to miss than before. 

Drafts

Drafts are a real nice feature. They allow you to save a copy of your content on the server which may be half-finished. You can return to it later, either to finish it off and publish the content or you could save it as a draft again. As drafts are implemented in the actual application rather than the object code, you can save drafts for any type of content – blog entries, forum comments, pages, etc. 

Drafts

When you have some saved drafts, you’ll get an extra item on your "member bar". Click on this to access all of your drafts. From here you can continue editing them or delete them. When you select to edit them, the draft will load into the form. Options such as categories/tags will not get lost when you save it in your draft.

Templating

As previously mentioned, Geneone now uses Gene_Template which is a dead simple templating layer which uses PHP to parse your templates. I’m a big fan of the new templating system – it’s 3.7KB instead of 300KB for Smarty.

Gene_Template

With Geneone I decided to get rid of Smarty for several reasons:

  • I wanted to internationalize my script. Smarty could do it, but I’d end up with code such as {"Entry Title:"|tr}. This is fine but it quickly gets ugly.
  • I wanted to filter the output for HTML. At the moment I have been doing it in a hackish way by calling htmlentities() before it was passed to Smarty. This was pretty ugly and involved more work than neccessary.
  • I’m doing a lot of advanced things which outgrow the syntax of Smarty. I’ve had to use {$object|@makelink} when $object is an array/object and {$object|makelink} when $object is a string.
  • I was getting to the point where I’d have to create function in PHP then interface it with Smarty. It was easier to go skip that extra step. In PHP you can do all the familiar stuff such as substr($str, 0, 3) instead of {$str|substr:0:3}.
  • A lot of people don’t seem to like Smarty. Templates in PHP are good because it’s already familiar to all PHP programmers. Template designers are more likely to know PHP than Smarty. If they don’t, they may learn a bit of PHP and the fact they know a little bit might mean they would be more likely to contribute to the core code.
  • Smarty is LGPL. Eventually I want Geneone to become a fully BSD licensed package.

Smarty had actually suited me well for the last couple of years so it was sad to see it go. I looked at Savant which is probably the most well known templating system which uses PHP but I decided that it was too large and the LGPL license wasn’t BSD-compatible.

Savant has template plugins which I didn’t really see the point on. Instead, I simply define a function either at the top of the template or in the functions.php file. Instead of ~300KB for Smarty and ~40KB for Savant, Gene_Template is just over 3KB. The API has been modelled after Smarty so a lot of the code from Smarty doesn’t have to change.

The API looks a bit like this:

class Gene_Template {
    var $templateDir;
    var $templateVars = array();
   
    /**
     * Assigns a value to a template variable.
     *
     * @var string $name Variable Name
     * @var string $value Variable Value
     */
    function assign($name, $value) {}
   
    /**
     * Assigns a value to a template variable by reference.
     *
     * @var string $name Variable Name
     * @var string $value Variable Value
     */
    function assignRef($name, &$value) {}
   
    /**
     * Appends a value to a template array variable.
     *
     * @var string $name Variable Name
     * @var string $value Variable Value
     */
    function append($name, $value) {}
   
    /**
     * Appends a value to a template array variable by reference.
     *
     * @var string $name Variable Name
     * @var string $value Variable Value
     */
    function appendRef($name, $value) {}
   
    /**
     * Gets the value of a template variable.
     *
     * @var string $name Variable Name
     *
     * @return mixed Variable Value
     */
    function get($name) {}
   
    /**
     * Get an array of assigned template variables.
     *
     * @return array Assigned Variables
     */
    function getAssigned() {}
   
    /**
     * Fetches a template and returns the contents.
     *
     * @var string $templateName Template Name
     * @var string $variables Template Variables
     *
     * @return string Parsed Template Content
     */
    function fetch($templateName, $variables=array()) {}
   
    /**
     * Fetches a template and displays the contents.
     *
     * @var string $templateName Template Name
     * @var string $variables Template Variables
     */
    function display($templateName) {}
}

Templates change from Smarty syntax a bit like this:

{if $actions}<ul id="actionlinks">
{foreach from=$actions item=i}
    {if $i.2} {* Current Action *}
        <li class="currentact">{$i.1}</li>
    {else}
        <li><a href="{$curlbase}/{$i.0}">{$i.1}</a></li>
    {/if}
{/foreach}
</ul>{/if}

To PHP Syntax a bit like this:

<?php if ($actions): ?>
    <ul id="actionlinks">
    <?php foreach ($actions as $i): ?>
        <?php if ($i[2]): /* Current Action */?>
            <li class="currentact"><?php _e($i[1]) ?></li>
        <?php else: ?>
            <li><a href="<?php echo $curlbase ?>/<?php echo $i[0] ?>"><?php _e($i[1]) ?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
    </ul>
<?php endif; ?>

The Smarty syntax probably looks a bit cleaner and it’s a lot lazier to type but I hope things such as syntax highlighting and familiarity with PHP will counteract the benefits of Smarty. 

Update, Geneone 0.6.3

For those of you who have tried to comment over the last week or so and have had problems, I’m very sorry; the issue has now been fixed. A big thank you to Dagur for letting me know.

Geneone 0.6.3

I’ve released a build which contains all of the work on Geneone over the last few months. There is social tagging functionality in the forums, the ability to move discussions, users can re-use old names, a tidyup of the Javascript (smaller prototype, JSON, fix IE bugs) and some big security improvements regarding session security.

Geneone is still in a technology preview state. It isn’t even alpha yet, so you should not run it on a production website. This release is unfinished and will contain bugs. There will be no way to upgrade from this version to a later one and pretty much every version has broken backwards compatibility with the previous one.

If your still interested, download it (911 KB). 

See full changelog

I’ve been releasing a build around the 12th of each month for the last few months. I hope to reach a more stable stage with a script which can be tested in a few months time. 

Savant

I finally decided to investigate Savant today, a "simple, elegant and powerful" alternative to Smarty.

Smarty is undoubtedly the king of PHP templating engines. It’s powerful, very flexible and can be quite beautiful. I’ve used some quite advanced features of Smarty. In Evolution we use Smarty to do callbacks from the forum code to Evolution code.

One of the features I’ve liked about Smarty is the ease and elegance of embedding parts of different templates. For example $object contains an array which is the current forum discussion. $childs contains all the posts. In Smarty you can do the following:

{$object.title}
{foreach from=$childs item=i}
{include file="showpost.tpl" object=$i}
{/foreach}

In showpost.tpl, you can then refer to $object. Sure you can do it in loads of other stuff, but I really like the elegant syntax you can use in Smarty. On the other hand, Smarty can force you to do ugly stuff like this:

{tagcloudsize tags=$terms assign="total"}

{foreach from=$terms item=i}
    {tagsize tag=$i total=$total assign="size"}
    {"<em>"|str_repeat:$size}

This is one example of a limitation and fugly code in Smarty. You need to implement a callback function which takes an "assign" argument and then use what is returned.

Harry Fuecks walks through some of the issues with Smarty. 

PHP is a bit more complex than basic Smarty but once you get into the more complicated stuff, PHP turns out to be a lot simpler. A lot more people can code PHP too. 

I’m actually not sure whether I should use Savant or just roll my own templating code as Savant doesn’t actually seem to do much and I’d like to get away from using LGPL/GPL software. Anyone had experience with alternative templating engines?