TiddlyWiki save changes on FireFox browser

Just tried to save my TiddlyWiki local homepage. Failed under FF 17.

Went to the TiddlyWiki forum to see if there is any info: link https://groups.google.com/d/topic/tiddlywiki/BzOj_T7zOwE/discussion
I installed the new TiddlyFox extension: https://addons.mozilla.org/en-US/firefox/addon/tiddlyfox/
Restarted the browser and now I can save wiki pages to local file system.

FireFox: 17
TiddlyWiki: 2.6.5

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

Add external links in SharePoint Document Library

If you don’t have access to the settings for a document library, you can use the technique presented here.

Essentially, what you do is create a text file that has HTML with a JavaScript location replace:

   <title>External Link</title>
       <script type=&quot;text/javascript&quot;>

Then you add this text file to the Document Library. When a user clicks on the link, the target opens. It handles backbutton.

Are there any security concerns with this? Perhaps, but one can already load HTML files, so the risks are not increased.

If you do have access to the settings, you can enable the library to have external links.

TiddlyWiki Alternative
If you have many links to add, the above HTML-JS file is very cumbersome. You can instead just upload a TiddlyWiki page that contains the desired links. The advantage will then be the easy wiki syntax and much more enhancements provided by the TiddlyWiki Single-Page-Application.

July 15, 2013: I had an instance where the JavaScript did not work, so I used the HTML meta refresh approach.

Further Reading

TiddlyWiki tiddlers by field name, sorted by date?

I needed to search for Tiddlers by tag name, then open them in descending creation date order. Sounds simple and it is, but ….

Replace a Word based system with a more light weight web style? TiddlyWiki is a good approach to try first. However, unless you use TiddlyWiki a lot, it can take a while to grok.

This is posted, in case someone has need of example programming. Note I’m not a TiddlyWiki expert, so just use this as a start if it helps. Would have posted it to the TiddlyWiki forum but didn’t see how to post source code.

I needed to search for Tiddlers by tag name, then open them in descending creation date.

Sounds simple and it is, but I had to access the TiddlyWiki source to see how to do it once I got a hint on the TiddlyWiki forum.

Put this source into a new Tiddler, for example, named openStatusTiddlers. Note the improved version in the comment by enrike on Dec 4.

// based on sample code by Eric Shulman
var fieldname='tags'; // put in what you want 
var fieldvalue='status'; // same thing 
var tidlist=[]; 

// iterate thru tiddlers and add matching to array.
   if (store.getValue(title,fieldname)==fieldvalue) {

// comparison closure for array sort.
function sortCreation(tA,tB){
    return store.fetchTiddler(tB).created - store.fetchTiddler(tA).created


// now show them in the 'story' object, which is the visible tiddlers.

Button to show the content
Then I needed a ‘button’ to invoke that tiddler. I created some inline html in the MainMenu:

   &lt;hide linebreaks&gt; 
      &lt;&lt;JsDoIt 'show status' 'execute javascript tiddler(s)' 'openStatusTiddlers'&gt;&gt;

That uses the jsDoIt macro and HTMLFormattingPlugin.

Also in the MainMenu tiddler I’m considering putting in a list of the status tiddlers. One approach is using the forEachTiddlerMacro:

        '&quot;[[&quot; + tiddler.title + &quot;]]n&quot;'
        end 'count+&quot; Tiddlers foundn&quot;'
        none '&quot;No Tiddlers foundn&quot;'

Show when page is loaded
Finally, I wanted these found tiddlers to open when the TiddlyWiki page first loads. For this I created another Tiddler that is put into the “DefaultTiddlers” Tiddler (which opens any included Tiddlers).
That Tiddler contains the same JavaScript as in listing one above.

Why a Single Page Wiki?
In Wikipedia there is an entry for a Single-Page Application (SPA). This is not exactly the same thing. In that entry the SPA as a functional organization is emphasized. In TiddlyWiki there is an additional physical structure, it is a single page or document.

Some SPAs may be executed from a local file using the file URI scheme. This gives users the ability to download the SPA from a server and run the file from a local storage device, without depending on server connectivity. If such a SPA wants to store and update data, it must be self-modifying. That is, the SPA must be capable of writing itself to disk, including a representation of the state that is to be persisted. Such applications benefit from advances available with HTML5, particularly Web Storage.

There are advantage to this single file approach. First is the small footprint, second is its mobility. Another important reason is usefulness over time. In a reporting or documentation that uses MS Word or any other proprietary (even PDF docs) application, there are no guarantees that a document will be readable by future applications. A TiddlyWiki, on the other hand includes it’s own software and unless there is a breaking change in JavaScript and the whole web stack, will be usable. (I hope!).

Gave some example JavaScript code to use in TiddlyWiki to use in a HTML replacement for status documents in MS Word. When the TiddlyWiki page is opened the list of status entries are shown in descending date order.

Probably not the best approach, but enough to see if it is viable.

Single-Page Application
open multiple tiddlers macro forum thread.
jsDoIt macro
My question posted on forum

Can't save a new TiddlyWiki in IE

How to get over TiddlyWiki save issues in Internet Explorer.

I wrote before about saving issues in Chrome Browser, I now have a similar problem. I downloaded a new TiddlyWiki version and when I try to save a change in it, I get problems in IE browser. I don’t have administrator access to this system, so maybe this is an issue?

Here is the fix which someone mentioned in the TiddlyWiki forum. Just copy the file and save to a new file name. This won’t work with just a file level copy. You have to copy the internals themselves: open the new file in a text editor, I used GVim, then copy the contents into a new editor file and save to a new file. When you open this new file you will get the usual first time IE security and activeX warnings. After that, the TiddlyWiki file is now a “normal” instance.

BTW, I recommend the SinglePageModePlugin. It allows the setting the way TiddlyWiki opens Tiddlers, less confusing, especially for casual TiddlyWiki use.

What the heck is TiddlyWiki? See “TiddlyWiki for the rest of us” for an end-user guide.