TiddlyWiki Garden Plugin: Learn Filters and CSS

Plugins
#1

Tiddlywiki Garden

The garden is used to demonstrate, practice and learn, Filters, Wikitext, and CSS. TiddlyWiki garden inspired from CSS Zen Garden.

NOTE: TiddlyWiki Garden is NOT a resource, instead it is a tool to create resources, like a Filter Garden, or a CSS Garden.

  • Use garden to create new resource in TiddlyWiki for Filters, other WikiTexts, or CSS
  • Distribute the resource (the garden) to learner and practitioner

The garden is an interactive tool. It can be used

  • To display an example (code and remarks)
  • To edit the example (change the code and see the result)
  • Reset to original code
  • Create new example

Learner can change code without worry and click on reset to return to original code.

Similar resources

If you like it star on GitHub.

NOTE: TiddlyWiki Garden is a tool to create TW educational resources. It has not any content itself.

Code and demo

NOTE: Press alt+G to open the Filter Garden Example in fullscreen size and enjoy the responsive UI.

Screenshot

Sample Garden

image
image909×883 35.9 KB

  1. Drop down (select widget) to choose an example
  2. Filter examples by difficulty level
  3. Navigation buttons to move back and forth among the examples
  4. Edit/Reset/Copy example code buttons
  5. New/Clone/Open example
  6. Code pane
  7. Preview pane
  8. Remarks section

Dedicated sidebar search

image
image502×538 20.1 KB

Code Tiddler

image
image870×746 45 KB

  1. title
  2. description on title
  3. link to relevant remark tiddler
  4. open example in Garden

Remark Tiddler

image
image867×518 27.6 KB

  1. title
  2. description on title, this value is read from xxx/code description field
  3. link to relevant code tiddler
  4. open example in Garden

Settings tab

image

TiddlyWiki Garden is a nice example uses modern features from TiddlyWiki 5.2.3.

Update 1.2.1

  • A new update has been pushed
    ** Sidebar tab for examples
    ** Reorder, sort examples
    ** Improved UI
    ** Bug fixes
5 Likes
#2

Don’t mix this with Digital Garden which is different topic.

#3

The idea and concept behind TiddlyWiki Garden can be used to create interactive non-destructive tool for learning TW, HTML5, CSS and anything can produce results through TiddlyWiki.

By non-destructive, I mean user can edit code and content without worry. A click returns original content and reset. While you can save your edited code.

TiddlyWiki Garden can be compared with CodePen but with limited features. It can used as an offline/private or online/public tool like any othet TiddlyWiki.

#4

Oh man this is brilliant!

I do believe that TW adoption would greatly benefit from interactive tutorials aiming to ease the learning curve. Your Garden makes them possible, thank you so much!

Fred

1 Like
#5

Nicely done @Mohammad

Note that there is a typo in the URL.

#6

Very nice @Mohammad !!

#7

Yes, the correct URL is https://kookma.github.io/TW-Garden/

Fred

1 Like
#8

Thank you Saq!
The URL is corrected now!

1 Like
#9

TiddlyWiki Garden just got a new update!

Code and demo

2 Likes