Home page using TiddlyWiki

Tutorial on using the classic TiddlyWiki single-page application for a favorites/home page. TiddlyWiki 5, now in development requires its own tutorial.

A browser has a many ways of storing your favorite locations. One of these is the bookmarks feature. Bookmarks are very powerful since you can share these, and by using various apps or services use them anywhere you are located and even make them cross-browser. One can even use cloud services that allow central storage of your links.

However, due to security concerns, business demands, firewalls, or just control, having a local web page that serves as a dashboard can be very powerful and more efficient. To do this the web page must be easy to maintain, not require a server, portable, free, and powerful.

One application meets these needs: TiddlyWiki. “A reusable non-linear personal web notebook”.

“TiddlyWiki is written in HTML, CSS and JavaScript to run on any reasonably modern browser without needing any ServerSide logic. It allows anyone to create personal SelfContained hypertext documents that can be published to a WebServer, sent by email, stored in a DropBox or kept on a USB thumb drive to make a WikiOnAStick. Because it doesn’t need to be installed and configured it makes a great GuerillaWiki. “

— http://www.tiddlywiki.com/

Thus, TiddlyWiki uses the Wiki approach to a website.

“A wiki … is a website whose users can add, modify, or delete its content via a web browser using a simplified markup language or a rich-text editor. Wikis are typically powered by wiki software and are often created collaboratively by multiple users. Examples include community websites, corporate intranets, knowledge management systems, and notetaking.”

— http://en.wikipedia.org/wiki/Wiki

Wikis were first created by Ward Cunningham with his WikiWikiWeb. Wiki is a Hawaiian word that means “fast” or “quick”.

TiddlyWiki takes this concept, but makes this into a more manageable single file. Whereas in a server-based Wiki the pages are an organizing embodiment, in Tiddlywiki, there is a tinier concept, called a “tiddler,” a unit of content. Note that TiddlyWiki 5, though still based on the “tiddler” concept, will have the capability to support traditional multiple page or ‘sites’.

What follows is a simple first steps to using TiddlyWiki for a local home page. If you don’t already have a TiddlyWiki you have to download the TiddlyWiki page. Note the singular “page”. TiddlyWiki is a single HTML page. However, since it has to support multiple browser types, it usually is accompanied by a helper file to allow saving of changes via the browser, this depends on which browser you use. I am using FireFox for what follows.

Just click the ‘download’ image.

download image

Since I am using the FireFox browser version 11.0 only a single file was downloaded called “empty.html”. If you download by using Chrome you will download a zip that contains two files: empty.html and TiddlySaver.jar. Copy that file or extracted files to a folder where you want to store this “home page”. Then double-click on it. It should open in the default browser. It should look like this:

Close the browser and again in that folder, rename the file to something more useful, like homepage.html. Double click and open that file again.

Can we save changes to the page? Click on “Site Title”. A tiddler should open up:

A tiddler is just the unit of organization, a microcontent, analogous to a post in a blog, or a page in a web site.

Double click inside it or click the “edit” link. That tiddler should open into edit mode:

In the text area, change “My TiddlyWiki” to something like “My home page”. Don’t change the name of the Tiddler, “SiteTitle”. There are system related tiddlers, this is one of them. Click the “done” link. Scroll to the top of the page and the title area should now look like this:

Click on “save changes” in the right hand action area. It should show an alert area on top right of page indicating that the page was saved:

Close the browser. Now double click on that same file in the folder you created before. It should open showing the latest change you made. You’ll notice that in the file folder there is a new file named something like “homepage.20120322.0026032540.html”. By default, TiddlyWiki saves versions of the file. I would leave that setting on. As you customize your page, there are many plugins available for adding, for example, you’ll want to be able to get a prior version. An alternative is to use a version control system in this folder like Mercurial or Git.

Congrats! That is the gist of how one interacts with a TiddlyWiki page. Now change the SiteSubtitle in the same manner.

Adding Links

Since this is a homepage you want to give your information some kind of easy to use order. So first create a container for your news links. Click the “new tiddler” link in the right hand action area. This will create a new Tiddler, and add some links to the news sites you like.

Lets add a Favorites tiddler:

The result is:

Still looks very bad! Lets hide the actual news addresses:

Here we use one type of linking: [[name|address]]. The result is:

Much better. Yes the color code may not be great and the table looks old school. All this can be changed of course, but that is another topic.

Lets fill in some more place holders in the table.

And we get:

Now lets finish the page up by making the Favorites more accessible. When you open a TiddlyWiki page certain tiddlers will be shown in the display area, that central region. That central region is the “story”. Which are first shown are indicated in a tiddler called “DefaultTiddlers”. Open that one up and edit it:

We took out “GettingStarted” and used ours. Click done, save the whole Tiddly page, and then reopen it:

Lets now modify the Main Menu. This is the list on the left of the page. We’ll add our ‘Favorites’ to it. The main menu is, yep, controlled by the MainMenu tiddler. Click on that; it should be listed on the list under the ‘Shadowed’ tab.

Which results in:

That is it. Pretty simple! I will post more tutorials on adding simple features to this hompage TiddlyWiki.

More Information

  1. Youtube videos on TiddlyWiki
  2. TiddlyWiki homepage
  3. TiddlyTools for awesome but advanced plugins

Window limit reached on Android

I’m getting this alert message with the alert box information of “Can’t open a new window until you close one”.   Well sure, that makes sense and yet it doesn’t.


Well, for those who are not into tech here is the quick rundown.  If you were not on a smart phone or maybe tablet, these windows would be called browser “tabs”.  On my phone the limit is 8.  Thus, you just have to close one. That is, in this particular situation, window === tab, and this browser won’t allow many tabs.

Another option is to use another Web Browser. I’m now trying the Google Chrome browser available for Android. On Jelly Bean you can even replace the default browser link icon on the bottom toolbar of the screen with the Chrome one.

How to close a tab in browser

On my phone you scroll to the top of the current web page, and in the top right of the browser app,there is a button, widget, or something that you have to click.  This gets you into the ‘menu’ where you can close some of the open windows.  On my Samsung Note with Android 4.0.1, the button is an icon of cascaded rectangles.  I read that on other phones it is a vertical series of dots.

Note that on web sites they say you have to go into the menu to close a browser window.  Not really true, afaik, there is no old style browser menu.  If you go into the phone menu or soft key and close the browser you are closing the application, not a browser window or tab.   I know, what a mess!


This is so bad.

  1. Prior to my update to Android 4, aka Ice Cream Sandwich, I never had this problem.  So, it is this browser.
  2. It takes too much effort to close those windows.
  3. It takes too much time to close even one window.
  4. This whole thing is dumb.

Instead, why not just prompt or do something to offer a quick solution.  Like:

  • Offer or automatically reuse least recently used window?
  • Offer list of windows and single click to reuse one.
  • Put a link in the alert box to allow single click to go into the window list and close cha cha.
  • Not have a limit.

2013-05-02: The Chrome browser for Android handles multiple tabs much better than the stock browser, at least on my Note. You can have many, resize, order, scroll them, “… all kinds of moves.”

Why don't browsers have up and down buttons?

Browsers have a forward and back button. But, when you land on a site from an external link you sometimes want to, for example, go up the URL path to higher ‘folders’ within the site.

Browsers have a forward and back button. These help you navigate within your recent browser history. But, when you land on a site from an external link you sometimes want to, for example, go up the URL path to higher ‘folders’ within the site.

Example, your at http://somewhere.com/land/animals/waterbuffalo.html. How do you get to the land folder? Maybe there is something there, or how do I get to somewhere.com itself. The answer is you click on the address bar and edit the URL. Yuck! What is this, the 1800’s? Plus on any kind of smartphone this is pain to do. Plus, did you ever try to guide over the phone a non-compute savvy person to navigate on a site by editing a URL? Even more painful.

The old Google add-ons for various browsers used to have a page up widget. On FireFox I now use “Dir Up”.

Dir Up