Content styling and templates

Bit by bit I’m working on making it easier for folks to create their own Surfulater article templates. Once I’ve finished laying the groundwork and updating the existing styles and templates I’ll be ready to put a release out and write a strep-by-step guide to making your own templates. This is all a precursor to having template editing capabilities built-in to Surfulater.

The first step in this process has been to review the styles that are currently used by the templates and ensure they are sufficient to cater for the varied templates you are likely to want to create. This requires some guess work on my part as my crystal ball is currently out for repairs. With some guidance, I’ve refined and I’d like to think improved on the current look. By styles I’m referring to things like borders, fonts, margins and the like.

These images show what I’ve produced so far. The main differences you will see include a thinner border around the record, thinner more subtle borders between cells, the use of different colored borders, a different and smaller font used for field labels, and the focus rectangle and edit background color going all the way to the edge of the cell.

New look – plain

Current look – plain

New look – with focus

Current look – with focus

New look – editing

Current look – editing

The differences are subtle but I feel offer a cleaner and tighter look. I’m undecided about changing the color of the field label text. Of course this is something you can change, but seeing that most people won’t bother, a sensible default is needed.

These screen shots show a Folder, which is all I’ve worked on so far. However I’ve updated the code so that article and folder templates can use different styles.

The final screen shot I want to show is with the Content Elements set to hide Field Labels and Edit Pencils. With these settings in the current release you loose ability to collapse and expand articles as the [+] [-] image disappears. It also isn’t all that clear where one record ends and the next one starts, when you are viewing all articles in a folder. To resolve both of these issues I’ve added a new narrow column that includes the expand/collapse image and runs the full height of the article. This color alternates from article to article, making the visual separation much clearer.

I have to say that I find writing CSS and HTML a frustrating experience. It just isn’t something I do enough of, for it to become second nature. I’m also graphically challenged, which doesn’t help. With that in mind if anyone knows of any designers with a keen eye and good CSS skills, I’d welcome being put in contact with them.

From here I’ll be enhancing the template system to enable you to use multiple templates for each individual type or category of template. For example you will be able to have say three different templates with completely different layouts for the Web Template and switch between them at any time. Existing articles will be displayed using whatever template is selected at the time. When a new article is created that uses the Web Template, the current template from the three available will be used. This not only lets you have a custom layout and look, but more importantly it lets you customize the fields that are used. For example you may want to add some new fields and remove or rename some of the default fields. All with the flexibility of switching templates for content that already exists.

Ok I’m done. Do let me know what you think of the new styles I’ve shown above. Maybe you like things just the way they are now!

Improving performance with Multi-threading

A few weeks back a Surfulater customer (lets call her Mary) was having a problem where Surfulater wouldn’t start. It turned out that if she closed Surfulater and then immediately started it again, it wouldn’t start. During the process of trying to work out what was causing the problem I asked if I could get a copy of the Knowledge Base Mary was using. Once I got that I was able to reproduce the problem and fix it. This particular database was reasonably large and it took a few seconds to save, while Surfulater was closing. When you close Surfulater it disappears from the screen straight away, however it is actually still running, saving your knowledge bases and cleaning up after itself. If you started a new copy of Surfulater before the first one had truly closed, things got messy, causing the new copy to crash. So to end this part of the story, that problem is now fixed.

But the real reason for this post is to tell you about an important improvement in performance that I’m just finishing up. For a while now some users have been asking for an option to display a summary list of articles in the content window when you select a folder in the tree, instead of displaying the full content of all the articles. The reason for this request is that if you have lots of articles in a folder, it can take a little while before they are displayed, and during that time you are locked out of doing anything with Surfulater. This was never an issue that overly affected me, as my articles always came up quickly enough. That all changed though when browsing through Mary’s Knowledge Base (with her permission of course). Surfulater could go off with the pixies for many seconds at a time and all you could do was twiddle your fingers and wait. So why was there such a dramatic difference to what I was personally used to? Well it is simply because Mary’s Knowledge Base contains lots of very big articles, and mine don’t. By very big I’m taking about articles with from 100 to 400 KBytes of text and often containing quite a few large’ish images. To display one of these articles, it may take say one second, which is ok. But when you have a folder with 30 like this, you could be waiting around for up to 30 seconds. If you clicked on the folder by mistake, then well that’s just too bad.

So where is this taking us. It was clear from seeing Mary’s Knowledge Base that something needed to be done. I could have provided the requested option of simply displaying a list of article titles when a folder was selected, but I’ve never felt particularly comfortable with that solution. This is because the ability to display all articles in a folder, in their entirety, is very important for some people. Also there is little point displaying a list of articles, when you already have that in the tree. So you may as well just display the folder, without any article information.

A better and more ambitious solution was to hive off the process of displaying articles, so that it wouldn’t interfere with Surfulater’s operation. To accomplish this I’m using what is called multi-threading, which in essence enables you to run multiple processes at the same time, instead of sequentially one after the other. This sounds simple enough, but in fact anyone who has worked on the development of a multi-threaded application knows only too well how complex it is. One overly simple analogy is to think about two (or more) people trying to drive the same car at the same time! The most complex aspect of multi-threading is ensuring the processes don’t get in each others way. If they do the program can easily hang, corrupt files or other resources.

These animations show the improvements I’ve been able to achieve. Both show me holding down the down arrow key to move through the tree. The left hand image shows the behaviour as it has been to date, without multi-threading. Notice that when the tree selection moves to a folder with a number of large articles it pauses waiting for the articles to be displayed. This is the dead time I’ve referred to earlier. The right hand image shows the new multi-threaded implementation, which you can clearly see is much more responsive. In fact it is faster than this image shows, as i was constrained by the recording software I used to create the animations.


(You need to use IE to see the movies. For some reason they don’t appear in Firefox!)

The results are clear. You can now click on a folder with lots of large articles and continue working, without having to wait for all articles to be displayed. There may still be a short pause, depending on the size of the article currently being processed. This is due to constraints we have on what we are able to do in our background thread.

For the folks that have in the past requested an option to not display articles when a folder is selected, I’d like to know if this new multi-threaded implementation removes that need. And of course I welcome everyone else’s comments as always.

The plan is to have this available in the next release V1.99.0.0, which should see the light of day early next week, if not sooner.

Elusive no more – Surfulater V1.98.3.0 is waiting for YOU

I’m pleased to say the Surfulater V1.98 pre-release went off without a hitch. V1.98.3.0 packages up everything in V1.98.0.0, tidies up a few bits and pieces and prepares the way for the next important release.

The main enhancements in this release include the ability to use ‘Send To’ to E-Mail or Export all articles in a folder, new options to hide or show various elements in the content window, such as hiding item labels, the pencil column or empty fields (see below), the ability to expand and collapse all articles in the content window, updates to the layout in the content window to tighten it up, further improvements to Surfulater’s Unicode support, the ability to start minimized, plus lots more which you can see in the Release Notes.

There are also some important under-the-hood changes which you can’t see just yet, but will very soon. These relate to issues raised by a several people about delays when Surfulater displays all articles in a folder, and the articles happen to be reasonably large. The good news is these delays will shortly be a thing of the past, as the content window code has been re-written to enable the display to be updated in a background thread. The difference is quite dramatic, as you’ll be able to see in a blog post which I’ll publish shortly.

I’ll also be making it easier for you to use your own article templates and I’ll be writing an article which guide you through the process.  Expect to see this in the next few weeks. A new Surfulater user, Joseph Pinzone sent me some interesting article layout mock-ups earlier this week and I’m looking forward to putting some templates together to follow Joseph’s suggestions. And Judy Rich is interested in a Recipe template. Judy has sent me a mock-up which I’ll use in my aforementioned guide. I added a Citation field to the Web template for Mitchell L. Silverman recently, which is also worthy of including in the guide.

To wrap up this post I’ve put together a short movie that shows the new Content Elements feature in this release. This also demonstrates the flexibility Surfulater is capable of, when displaying content.





(You need to use IE to see the movie. For some reason it doesn’t appear in Firefox!) 

The Surfulater Download is in the usual places here and here.