mattmecham.com

[IPB 2.1] Tweaking the UI

I've revisited the "inline topic editing"; the feature that allows one to edit the topic's title when viewing them as a list in a forum.

Currently, one has to double click on the topic's table cell to activate the edit function. This is rather unfriendly. I had considered adding an "inline edit" icon somewhere but that would take away some of the "Desktop OS"-ness of the feature.

With desktop applications, we double click the icon or text to launch the application. Unfortnately, we only click once to lauch a web page. This incongruent interface means that we cannot directly emulate a desktop application unless we required a double click to load a topic. This would, of course, be silly. It's too late to reinvent the internet and requiring a double click would be akin to asking one to hold a mouse upside down.

To make matters worse, when one right clicks a link, the browser's pop-up menu is expected to appear. To change this behaviour would remove the browser's features and confuse the end user. As we're unable to modify the right-click menu, we can't do much with that.

I did notice, however, that when one wishes to rename a file in Windows or Macintosh, you simply click-pause-click or click-hold-click. Of course, this is of no use to a web based application because after a single click you expect the page to load.

I decided to opt for a simple 'click-hold'. After 1500 milliseconds (1.5 seconds) of holding, the link changes to the text input box allowing one to edit the topic title. This isn't a totally natural interface request, but due to the limitations and the discordant nature of web/desktop applications, it's a workable solution. This solution doesn't interfere with a single click and doesn't interfere with the browser's right-click menu. I only need to ensure that this won't interfere with screen-readers and other devices designed to make browsing easier for those with disabilities.

It was pretty easy to achieve really. Just a few link events (mousedown, mouseup) and a timer to check how long the mouse has been held down for. A setTimeout loop ensures that the time is constantly checked until the mousebutton is released.

Check out the result below.

Topic-Editing.mov (Quicktime .mov 1.7mb)

Puttin' it all together

I've just about finished the new template editing interface albeit with a few rough corners and bugs to iron out.

I think this is a good mix of javascript techniques; both traditional and AJAX. The Ajax is used to generate a list of "suggested" matches when searching for templates. When you click the "go" button after finding a template to load, the three panes open automatically.

Hurrah for javascript.

ACP-Finished-Templates.mov (Quicktime .mov 5.7mb)

Ajax not required!

Ajax is probably the most used and most misunderstood buzzword at the moment.

Ever since Google threw together their map and google suggest service web developers have been trying to jump on the band-wagon and throw Ajax at everything that moves.

Hey, so I'm on the band-wagon but at least I know when to stop!

Although still very much in progress, the movie below shows the new template editing interface. The great thing about it is that there's not a single blob of ajax in there. It's all done via iFrames which means that it works on every modern javascript enabled browser.

The new interface makes finding template bits a snap and as it's all on one screen you don't have to keep clicking between pages.

I am going to tidy up the actual editing interface and add a "save" button that uses Ajax so one doesn't have to refresh, but other than that, it's ajax free.

Hurrah!

ACP-Snazzy Templates (Quicktime .mov 4.3mb)

Ajax Inline Post Editing

When I first started added the ajax (XMLHttpRequest) functions to allow one to edit topic titles I thought about creating an interface to allow one to edit posts inline.

I rolled it around in my head for a while and decided that it probably wasn't needed and I wanted to make sure I wasn't throwing this technology around just for the sake of it (*cough* instant quick reply *cough*).

I usually get a feel for the need for a feature by how many times I wished it was on our corporate board. I make a fair amount of posts over there and I seem to have been struck down recently by a severe batch of "typo-itis"; a strange condition that leaves one with the impression that their fingers have been moved slightly to the left of their usual position which makes striking the correct keys in the correct order a rather hit-and-miss task.

Two days of constantly editing my posts was all that I needed to convince me to add this feature. I've added a little movie of it below. Don't worry about the interface, it's a little scrappy and will be cleaned up and made "purdy" at some point before final. I know that the first thing people are going to ask is "Can you put in a WYSIWYG editor?" followed by "Can you add a smilie pop up window and BBCode legend?". The answer to those questions and anything along those lines is a resounding "No". This is "quick edit"; a place to quickly make corrections to an existing post. If you want full editing capabilities, then hit the ol' "Edit" button.

The great thing about this feature is that the back-end only took a few minutes to write. IPB uses a OOP structure and as such it was a simple case of loading the edit post module and running it through there. A minor change to the core routines to display a friendly XML error instead of the classic HTML error page was the only 'big' change required.

Ajax-Post.mov (Quicktime .mov 2.7mb)

Backstage at the BBC

The BBC have always managed to get their websites "right". They invest heavily into their websites and their sites are regularly mentioned when good design and good content management are discussed.

Now, the BBC are inviting fellow web developers backstage.

backstage.bbc.co.uk is the BBC's new developer network, providing content feeds for anyone to build with.  Alternatively, share your ideas on new ways to use BBC content. This is your BBC.  We want to help you play.

In a nutshell, they're inviting us to use their syndicated content in new and innovative ways. I've said before that I love finding new ways to apply "old" technology and this project is just that.

The timing couldn't be better. We've submitted IPB 2.1's RSS import feature as a feature prototype and set up a test forum for importing RSS feeds on our corporate board.

Tomorrow is just an advert for today

Sorry about the blog title. That phrase has been rattling around in my head for a few days and I had to exorcise it.

Moving on....

I've coined a phrase: RSS-Link (Lindy prefers RSSync which he came up with) which applies to a technique which is now possible with IPB 2.1.

I've set up an RSS export on my dev forum, and set up an RSS import on the IPS forums. I post in a certain forum on my dev board, and when the RSS export is updated, it's imported into the IPS forums.

Although replies and such are still handled locally, it's a neat little system when you want to share topics across two installations. In effect, RSS is merely a transport method for duplicating content. I guess that's what web development is all about. Don't expose the end user to the technology - just give them a nice interface and a will to use it.

RSS Link in action (.mov 2.9mb)

Safari 2.0 WYSI-WONT

As you probably know, I'm a MacTard, so I was pretty pleased when my copy of Tiger arrived this morning. (OK, I'm not that much of a MacTard that I had it on pre-order for 18 months). After much "oooh" and "aaaah" at the new Mail client, the new Dashboard and the new "Spotlight" search (and trying without success to turn off the blurry new font smoothing) I figured I'd have a crack at the WYSIWYG editor for Safari which is something I've been very keen to do since I heard that Safari 2.0 feature contenteditable support and designMode support.

Other developers who've found this blog entry via Google hoping to find example code or hints on how to get a WYSIWYG environment for Safari 2.0 can simply read the instructions below.

Don't bother.

There is one pretty big flaw in Safari 2.0. When you highlight some text, and then click a button, the text is de-selected. This makes it impossible to use a normal WYSIWYG interface. I managed to get it running by hitting CMD + i and CMD + b but that's about it. You can also drag images into the editing area and move them about (although they disappear with alarming regularity) however, anything else (color, size, etc) is impossible as you have to click something outside the editing screen.

Worse still, is that even if you did manage to get around that problem (and I really can't think of one bar rewriting the entire editor) the support is minimal. Forget lists and indents, they aren't supported in Safari's execCommand library.

I concluded that I'd have to start from scratch with the WYSIWYG and when I'd finished I'd only have minimal support. So it came down to this equation: time > results.

(If some developer comes along with example code or a link to prove that it can be done, I'll claim this blog entry was designed to do just that and pretend it was all part of my evil plan and won't admit to my shortcomings as a developer)

Now, how in Job's name do I revert to 10.3's font smoothing.....

Really Sexy Syndication

I've finished the basics of the "RSS" import system and I'm quietly pleased with the implementation. You simply choose an RSS feed, tell IPB which forum to post them into and let it do the rest. It stores the "guid" of each imported RSS item (or if there isn't a guid, the RSS title) so you won't get duplicates. The RSS import is checked every "x" minutes and if new items are found, they are posted automatically.

Now, on first thought you may ask "What would I do with an RSS import?" well, many things:

1) Import news from other sources into your news forums. Ideal for techie sites.
2) Import news from your own syndicated sources. Manage news in your CMS (IP.Dynamic?) and have it auto post to your forums.
3) Import your blogs into a forum - consolidate all those content sources.
4) Use it as an internal method of moving data around. Export calendar events as RSS, and import them as topics...

I've added some screenies to show the news I stole from CNN and the ACP interface.

To do: Allow the admin to select the format of the "show source link in post" and allow the admin to determine whether she wishes these new imported topics to be moderated (shown as invisible) or closed when first imported.

CNN News (Note the "More News" links)
IPB Forum
ACP: RSS Import Form

It triggers the forum subscriptions as normal and always attempts to use the RSS item pubDate where possible. That's why the news is in a different order on my test forum when compared to the CNN site. They actually have it ordered incorrectly.

New Features? My RSS!

Another day, another feature completed for IPB 2.1.

My attention has been turned to the RSS manager; specifically the RSS export manager.

It allows you to set up your own streams using your own criteria and these will be selectable to the viewer via a "Syndication" link (and most likely via HTML link refs in the HTML source).

I won't babble on about it, the movie says enough.

Tomorrow will see the RSS import center work start. I plan to allow RSS feeds to be read and posted in a forum of your choice. That's the plan, anyhow.

ACP: RSS Manager (Quicktime .mov, 4.5mb)

My Assistant

I've spent the last few days refining some of the 'Ajax' features in IPB 2.1.

We've had some great and productive feedback from our customers on the new features and this feedback has motivated the change.

Ajax capable folks now get a floating 'div' MyAssistant that's draggable instead of a new pop up window. This has several tabs each powered by Ajax. (Random thought: I bet sales of a certain cleaning product have gone up in the last few months).

This effectively centralizes all the ajax driven components. I've removed the ajax pop-ups from the "View New Posts" and "New Messages" links.

When ajax powered members receive a new PM, their My Assistant is automatically opened and a new tab appears "New PMs" which is already opened. This combines the PM notification with the My Assistant and removes the semi-transparent notification which had a luke-warm reception. Non-ajax folks will get the 'old' IPB 2.0 PM notification albeit in IPB blues instead of reds.

The search is an interesting addition. The first reaction is bound to be "Hey, that's got to be a resource hog" but consider the following: Initial verification is done via javascript which saves a PHP process to determine if the entered keywords are of a correct length and format. You get to see how many matches there are before viewing the results. The current IPB search is in two stages split by a meta redirect. The first part does the search and returns the post IDs and stores them in a search results table. The second stage grabs these post IDs and builds the topic listing. One may consider that "x" matches is insufficient before searching again thus saving the second half of the usual search routine. The resulting HTML is cached in JS (the blob of text, not the page of results) so that if you search for the same thing twice, it doesn't invoke a PHP request.

Of course, screen shots just don't cut it anymore, so here's another (?:adult) movie.

My Assistant in action (Quicktime .mov 3.9mb)