silly video portal – an experiment using tiddlywiki to make a generic web app (no TW look’n’feel)

19 Dec

(tested in FF 3.6)

The tiddlywiki above is a lame video portal that looks like a generic
web app (only uglier). However, behind the scenes, it’s a tiddlywiki.
Actually, that’s not such a big secret as you probably saw a FOUT –
Flash Of Unwanted TiddlyWiki (cf – before the
page loaded. I’m not sure how easy it is to get rid of that – perhaps
a plugin that writes to the MarkupPeHead shadow or something.

But anyway, the point is to show how such a page can be styled.

There is actually a bit of a secret here. If you hover up to the
top-right, you’ll find a secret Backstage button. It gives you power
access to the rest of the tiddlywiki. I have in mind to replace that
with a “flip” button that would flip the UI into a regular TiddlyWiki.
(Would be awesome to do a 3D flip effect a la .)

It uses the TiddlyWiki theme concept. You make a tiddler with any of
three sections (blocks with headings): StyleSheet, ColorPalette, and
PageTemplate. Then switchTheme(“nameOfTiddler”) will switch the theme.
There are various plugins to peform this action on behalf of users.

However, the standard theme mechanism has a couple of catches –
there’s no CSS reset (I think there should be an option to attempt to
blank out any CSS before applying the theme); somewhere in the code,
there’s an assumption the PageTemplate contains a div called
“tiddlerDisplay” (I guess that’s a bug; thanks to @FND for helping me
on this point). Taking those into account, here’s how I made this
custom UI:

* Make a new tiddler called fancyTheme. It looks like this:


// a big ol’ CSS reset stylesheet, using Eric Meyer’s scheme. see my
recent post on those.

/* HACK TO ALLOW a “tiddlyDisplay” element */
#tiddlerDisplay { display: none; }

#backstageButton a { height: 20px; opacity: 0.01; }
#backstageButton a:hover { opacity: 1; }
// in the future, there will be more stuff to switch back and forth
between regular tiddlywiki and the custom UI

// the custom style, in this case the style for a video portal


Not Another Video Freakin’ Portal



All this is related to the TiddlyWiki MU vision I described in . If users can spin off
new instances, TiddlyWiki could be used as a general engine for making
generic web app, not just TiddlyWiki++ UIs, but UIs that look
radically different. The nice thing about the Flip concept is that
vanilla TiddlyWiki is a handy interface for performing basic admin, a
little like the Rails scaffold concept, or the earlier Naked Objects.
You build a web app centered around a tiddler-based data store; anyone
permissioned can edit those tiddlers.

This is the plan for Scrumptious Trails (
I’ll be porting over the generic web interface to a TiddlyWiki one
using the techniques described above.


2 Responses to “silly video portal – an experiment using tiddlywiki to make a generic web app (no TW look’n’feel)”

  1. Anonymous April 7, 2010 at 5:00 am #

    Hi, nice post. I have been thinking about this topic,so thanks for sharing. I will likely be coming back to your blog. Keep up the good work<a href="; title="fendi handbags">fendi handbags</a>

  2. Anonymous April 12, 2010 at 6:00 am #

    Wow…this was a really good article. interesting…., thanks for sharing the info, keep up the good work going….<a href="; title="Protocol Testing Training Bangalore">Protocol Testing Training Bangalore</a>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: