Drawing inspiration from Kodemo

#1

An interesting new tool has just been launched by Hakim El Hattab, the original developer of Slide and reveal.js. Hakim is a very creative developer whose work I have admired for a long time.

https://kodemo.com/

The basic idea is a scrolling story column with sidebar that changes dynamically as you scroll down the story. It’s worth clicking through to see the video and the demo:

https://kodemo.com/docs/what-is-kodemo

I think it would be possible to implement something like this in TiddlyWiki using the Dynaview plugin, and I’d be happy to help anybody who wanted to give it a go.

image
image1920×1362 134 KB

6 Likes
How to Delimit more than one filter in a string or field?
#2

I have a rough prototype I developed last year where the main scrolling story shows images or cards, and as you scroll the remaining screen shows information about the image/card. I did indeed using dynaview as a starting point.

As I recall it worked better as a UX for me when each individual tiddler was set to take up about 90-100% of available vertical screen real estate. I had the idea to try splitting the screen into quadrants, two images one above the other, with their respective information to the side, updating as one scrolls and the images displayed change. I cannot recall if I ever got as far as implementing that. I can try to dig up the code when opportunity allows in case it provides inspiration to others.

4 Likes
#3

hmmm. That should be relatively straight forward. I did a similar thing while I did the TOC refactoring 3 years ago.

I even made a video about the state of the refactoring, where I showed a very similar mechanism using auto-update in the sidebar. It would be possible to expand that mechanism to something similar as shown in the kodemo page.

The video uses the TW HistoryList as a source of interaction, but it would be easy to use 2 story-configurations to achieve a different result. … I should have the code somewhere hidden in some unpublished branches.

#4

This is interesting for educational material and I think it would allow you to write a text that integrates images (and other stuff) more easily than how it is typically done. With this display, I imagine the images can be stored in some separate folder and you can type the text and just put in triggers for what image is supposed to show up in the window.

It is a bit like a “powerpoint” but with actual text accompanying it rather than someone speaking. So your own reading sets the pace for when the images are to be displayed instead of the speaker.

I think it could make rich content book writing a lot simpler in TW.

1 Like
#5

BTW, imagine if the TW docs were presented like this! I think the “key text” in a doc could be very short if the tables/examples/notes/references etc could instead only appear if the reader reaches that part in the text.

4 Likes
#6

What if you just built a single tiddler that that behaved as desired?

  • I think the interest is in the two columns with content dynamically changed on the Right Hand side according to the scroll on the left hand side.
  • You could then transclude this tiddler in the emptyMessage background or use in a single tiddler view?
  • Then if needed you can produce one or more layouts

I am all for these interesting alternative views but if we can bundle them into a single tiddler and have the tools to make that single tiddler appear as it it was the story and the whole story, then our wikis could have a range of alternative presentation layouts without forcing a choice during design.

What is discussed here is in my mind a variation on this Example Table of Contents: Tabbed Internal

  • We could add dynamic code to support long tiddlers sub content
  • Add a generic tool to “feature” a specific tiddler, from which one could select from a range of alternative views/layouts and navigation methods.
  • All effectively story tiddlers that can be used in a tiddler, a layout, empty background and one or more simultaneously if so desired, eg in multi-column or Murri layouts.
1 Like
#7

A simple way would be to use @felixhayashi 's HotZonePlugin (and on gh). This senses what tiddler is at top of viewport and you get the name of that tiddler as {{$:/temp/focussedTiddler}}. So the tiddler with the text could have a url field to an external image. By making the tiddler river narrow, or perhaps using the sidebar, there could be an area next to the river that transcludes the url field and displays this image.

A limitation would be that every new image would require its own text tiddler which might not be optimal, not least for authoring the text. It would be better if the text could be interspersed with multiple urls that are extracted via some filtering of the text, but then I’m not sure what would trigger to show the respective images from the same tiddler. Could Dynaview do this?

1 Like
#8

I would very much like to get something like this going in TW. I do something similar here.

I’ve really enjoyed this device over the years and porting it to TW would make my migration complete. I imagine something as simple as an “imagebar” showing the illustration field of a tiddler (if it has one) if that tiddler is “active” or visible in the viewport.

3 Likes
#9

TW has different StoryViews and a future mechanism for the core has to work for all of them. So zoomin-view and stacked-view, which is part of the prerelease also have to work. I’m not sure, if the hotzone plugin works with all of them or just classic.

There are several issues at GitHub, that discuss navigation using different story-views in different story-rivers. … Non of them have been implemented yet.

#10

I’m thinking that just maybe a Kodemo variant can be created in TW, using purely CSS.

The “key difficulty” with CSS, at least from my perspective, is probably that the bigger frame should instantaneously change its content when different points in the text is scrolled to viewport top. But when I was dabbling with the scrollbar idea, I found this CSS concept. Basically it shows a scrollbar that progresses in discrete steps as items are scrolled to.

For a TW Kodemo version, the idea would be to intersperse longer texts with “markers” (custom html tags? Macro calls?) that, when scrolled to, would use the above technique to flip the content seen in a bigger “image area”, located next to the text. The “marker” would contain the info about what should be shown, e.g a URL (or perhaps a transclusion from a tiddler, or a textreference to a dictionary tiddler that is easily filled with multiple images or urls).

@telumire - and other CSS experts here - what do you think? Could it work?
(Some brief attempts, that don’t use the above mentioned method, are not very successful… but I at least get external images to successfully show :wink: )

1 Like