Tutorial Article on Medium

#1

Hello TW community,

I’ve written a tutorial article on Prototyping an application using Tiddlywiki on Medium. Its my first attempt at writing about my areas of expertise so I’m keen on any feedback you may have

Also - if there is any interest on more tutorials on other TW topics - let me know. My initial thought was to build an application and then write about operational functions (ie secuirty, monitoring, devops etc) as this my core expertise.

Cheers
Christian

3 Likes
#2

I think for something that aims to look “appealing” to new users, it lacks something very important. It has HTML/CSS/Wikitext listings, but no screenshots at all. I know for a fact that as a completely new user, I always have a somehow superficial attitude when getting to know new software - I’d like to see how it looks (unless it’s a pure CLI program). In this example, to see how things look, I would need to copy these code snippets and actually run them locally, for being able to observe the outcome. Not to mention that this requires installing Node.js first, which is not trivial - for users of different levels of technical competence. I think TiddlyWiki would only benefit if any introductory article would emphasize more that the simplest way to run it is to download a single HTML file and run it in the web browser (of course, there remains the big headache of saving the changes then).

Just my two cents.

#3

By curiosity I managed to follow your tutorial, but I can’t figure how to make the completed button work. You didn’t explain the fact tha the completedStatus macro tiddler should be tagged $:/tags/macro.

And even though, the button doesn’t appear in the activities card.
You could make a link to an example wiki all set on https://tiddlyhost.com

#4

As someone who regularly does extensive work developing TiddlyWiki add-ons, you might wonder what method I use to save my TiddlyWiki files; and you might be surprised to learn that I always use the default built-in “HTML5 download saver”, which does not require ANY installation of separate browser add-ons or external “helper” applications.

Here’s a summary of the method I use:

TL/DR:

  • Configure the browser to “ask where to save each file”. In Chrome this is found on the chrome://settings/downloads page. This setting only need to be done once, and is remembered by the browser for all subsequent download actions. A similar setup option exists in nearly all modern browsers.
  • When I press the TiddlyWiki “save changes” button in the sidebar PageControls (or use the CTRL-S keyboard shortcut), I get a system-provided dialog to select the target filename. In this dialog, I select an existing target filename and press “save”, or just press “save” to create a new “filename.html (n)”.
  • If I am overwriting an existing filename, I am asked to confirm before proceeding.

It’s just that simple… no “big headache” at all… and it has some very nice advantages as well, as described in this more detailed post that I wrote way back in May of 2022:

-e

7 Likes
#5

Thank you. I was beginning to feel I was the only one who did this. I took this one step further. On startup I set $:/config/SaveWikiButton/Filename with a new filename. TW uses this tiddler as the save default filename. In doing so if the newly open html has a version (n) found in its name I increment that number. I want a new instance each time I save. It makes it easy for recovering when I accidentally remove content.

#6

Welcome to talk.tiddlywiki.com!

This is great. I think we need more content like this.

I agree with the suggestions here: skip the Node stuff, mention that you need the macro (or global) tag, add screenshots, and add a link to a working example.

Another minor point: you don’t mention how to deal with [[Names with Spaces]] The brackets in one of your examples are fairly unmotivated. And without that, they can’t make “LMS Application” a default tiddler.

But I would also suggest that you move to a few more modern features: a procedure instead of a macro, and <% if %> ... <% endif %> in place of the <$list> ... </$list> wrapper in the ViewTemplate. That latter, I find, is quite a bit more beginner-friendly.

#7

Thanks Vuk,

I will re-build the app online at Tiddlyhost and take a screenshot as your right to suggest that would engage readers more… and this will work on all versions of TW - but i started building it in node on my computer which is why i added this to the article … but can see now that is maybe a tangent discussion and could be edited out

Cheers - CB

#8

Thanks Thomas

I’m rebuilding this now on tiddlyhost, not sure why the button will not appear - once i find the problem, i’ll post an update here…

1 Like
#9

Thanks Scott - really helpful suggestions and I’ll look at updating with those asap.

#10

Hi All,

I’ve updated the article and provided a demo site on tiddlyhost ( available here ).

In the end I stayed with the current code rather than use some newer features … just to stay consistent with the limited concepts introduced here. The <%if> syntax for example is not for a widget - so would raise a whole tangent discussion about why it has <% vs <$ as a markup prefix …at least that is the question it triggers for me .

Cheers
CB

#11

This is looking great!

You might want to add a link somewhere in “You can just download the single HTML file and run it in the web browser” to either https://tiddlywiki.com/#GettingStarted or to https://tiddlywiki.com/archive/empty/Empty-TiddlyWiki-5.3.6