[Demo] TW5 for Readers and Writers

[Thomas Elmiger]

Inspired by many discussions [1] here about TW as a writing environment, I built my own vision of a reader–writer solution.

A demo is live now on my tid.li server: https://tid.li/tw5/test/concept.html

This project is not finished in any way, but some features/plugins are working and it contains a real book, divided in more than 150 tiddlers as demo content. On start up, the whole book should be loaded, so it might be somewhat slow ... but it’s worth it.

I do not have the time for further explanations, but the best thing will be if you play with it, read the story, maybe change the story and see how you get along as a reader or writer.

I hope you can grasp some ideas behind it.

The next week will be busy so answers (and even more: updates) will take some time.

All the best,

Thomas

[1] This one here ist only the latest of many more: https://groups.google.com/d/msg/tiddlywiki/yzVdb42TUBI/maR0mqHOCAAJ

[@TiddlyTweeter]

Thomas ...

Really interesting.

I tested it on Firefox Desktop and then on Android 8.0.0

TBH the approach is really good not just for writers but also for readers. On Android particularly it was excellent for better reading. 

I can see how it could be great for E-BOOKS.

 As usual I'm always running ahead ... 2 thoughts (mainly when you just want to read ...)

1 -- Add Bookmarking to sections so you can pickup reading where you left off;

2 -- Make the menu of contents "pop-in" so the first thing you see is the start of the text, not the contents list.

Just thoughts

Josiah

[Jan]

Hello Thomas,
a very useful developpment... with incredible hidden features like that footnote enableing to jump back...I will certainly reversengineer how you did that...
Greetings Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8cc6e540-d087-4550-99d2-e5b5c1a7ec66%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mark S.]

Hi Thomas,

All your designs are so beautiful!

The main problem I see is that there doesn't seem to be a way to change the order of tiddlers without manually entering new index numbers. Is that right? Or am I missing something? I see where it works fine for reading an existing document, but would be challenging for generating new content.

Thanks!

-- Mark

[Thomas Elmiger]

Hihi, thanks for all the feedback!

First hints for reverse engineers:

The button on the right of the save button changes the design.

Check settings of all plugins – or check https://tid.li/tw5/test/concept.html#About before you do.

(More explanation maybe in a few hours.)

Cheers,

Thomas

[Thomas Elmiger]

Hi Mark,

All your designs are so beautiful!

Thank you! This one is not so far from a standard TW :)

The main problem I see is that there doesn't seem to be a way to change the order of tiddlers without manually entering new index numbers. Is that right? Or am I missing something?

In the MyStory tab in the sidebar you can see the list of tiddlers and reorder them via drag and drop like in the standard "Open" tab.

Then you could go to the (Story) Admin tab and save your new arrangement.

I could add drag and drop for tiddlers in the story river too. But I am in doubt ... maybe it should be there as an option?

On the Contents tab at the bottom there is a tag to reorder the top level entries in the tree – "chapters" or "books" (if you think of a book or a library) – also via drag and drop.

Cheers,

Thomas

[Damon Pritchett]

I definitely like this. In the MyStory tab would it be possible to somehow highlight which tiddler you are currently reading so that you could see where in the entire story that you are?

Damon

[Thomas Elmiger]

Dear TW-friends,

Thank you for the feedback! An updated demo on https://tid.li/tw5/test/concept.html comes with bookmarking and drag and drop.

Bookmarking marks elements in the MyStory tab, so you know where you are, Damon :)

Drag and drop adds more value than I expected as you can drag between sidebar and story river ...

Check it out and let me know what you think.

(Note: Plugins were NOT updated, everything is in a hacky state.)

Cheers,

Thomas

[TonyM]

Thomas,

It is looking really good, and you have some novel (forgive the pun) ideas about making this easy to view and use. Good Work.

Regards

Tony

[Watt]

Thanks for this Thomas!
Some feedback for you, apologies if you've heard it before. The short version; simplify everything, remember mobile users, why not 2 plugins?

The long version;
Reading and writing might be two distinct modes and a user might use different devices for each mode. e.g I might read on my phone but prefer to write on a laptop. The interface and navigation should be mobile friendly wherever possible.

I'd like to be able to clearly switch between modes. When I'm reading I'd like a minimal set of options and very simple user interface, like most e-readers. A library, a title selector, a table of contents (only as far as chapter level), bookmarks, a clipping collector. That's about it. I'd like these to disappear completely when I'm actually reading.

Maybe I'd like to swipe or keypress to advance the page, rather than scrolling. Navigation everywhere by buttons.

Import of html as an e-book would be nice. e.g Project Gutenberg, but maybe webpage import too for study/notetaking. Gutenberg books already have an html toc.

For me good e-readers are minimalistic to look at and the content already has a structure that I'm not going to mess with. It's for reading only, not editing or writing.

Writing on the other hand is all about editing, playing with the structure, granular control (to paragraph or even sentence level), the ability to move things around, generating a toc, indexes, bibliographies, notes on notes etc. A good writing tool also enables creativity by hiding the bells and whistles away until called for.

E-reader manufacturers have taken a long time to refine their functions. Not many of them include E-writers. How many writing tools include an e-reader in the kindle sense?
Maybe this plugin/edition should be split into two? An e-reader for TW and a Writing tool for TW.

Just some feedback, ignore at will.
Best

[Mark S.]

Hi Thomas,

I think I'm going to need more information. I made a tiddler and almost immediately lost it. Then I had to dig for the recent tab to recover it.

I think I don't understand the "loading". Is it loading an entire new set of items (replacing the old set), or is it adding to the story river?

I think you previously had buttons in the menubar that would allow you to add new items in place? That seems to have disappeared.

For someone writing, they will need to add new items right before or after the current item. Otherwise it's too easy to make a tiddler and then lose it somewhere in the story river.

Thanks!

-- Mark

[Thomas Elmiger]

Hi Watt,

Thanks for your interesting thoughts! Happily I will clarify my intentions and the maybe somewhat misleading title of the "reader writer notebook".

The short version; simplify everything, remember mobile users, why not 2 plugins?

The short answer: I like KISS*, I like mobile first, there are 4 plugins ;–)

The long version;
Reading and writing might be two distinct modes

True. I made the Reader Mode plugin first to optimize the reading experience in TW in general, not necessarily with e-books in mind. The e-book is just my big test case. My ambition is always to design stuff as useful and pleasant as possible, for readers and writers as well. AND: As a writer I would like to check my publication in (nearly) the same look as readers will experience it later. So the Reader Mode plugin gives you some options in the plugin settings, but then also a single button to switch modes.

and a user might use different devices for each mode. e.g I might read on my phone but prefer to write on a laptop. The interface and navigation should be mobile friendly wherever possible.

A clear yes. At the moment this is TW standard design with just a little bit of tuning. I think reading in reader mode works great on phones (images don’t look good yet as I preserved Gutenberg image sizes for this version). Bookmarking might not work well on mobile in this design but should work fine with other designs I develop separately.

 

I'd like to be able to clearly switch between modes. When I'm reading I'd like a minimal set of options and very simple user interface, like most e-readers.

Same here. But how much easier can it get than a simple click of a button? (And maybe one more to hide the sidebar.)

 

A library, a title selector, a table of contents (only as far as chapter level), bookmarks, a clipping collector. That's about it. I'd like these to disappear completely when I'm actually reading.

Close all tiddlers on https://tid.li/tw5/test/concept.html – then think of the tab Contents as your library: Open a book in the tree, e.g. Concept. Click a chapter (I’d recommend "About this concept" – it might be one of a few where this works at the moment), on the appearing tiddler click "Load: About this Concept". This and Bookmarks might be all a publication needs.

 

Maybe I'd like to swipe or keypress to advance the page, rather than scrolling. Navigation everywhere by buttons.

I missed a button "to the top" myself. (I have one, but it’s not new, so it is not part of the concept at the moment). For the rest I think devices/browsers should implement such functions for keyboard, mouse or whatever there is. Users will be used to work with these, no need to invent my own ones.

Import of html as an e-book would be nice. e.g Project Gutenberg, but maybe webpage import too for study/notetaking. Gutenberg books already have an html toc.

My example is from there but did not offer a TOC: http://www.gutenberg.org/files/19445/19445-h/19445-h.htm

And the problem with imported HTML in TW is: internal links don’t work.

Anyway, importing is not my concern. Authoring is.

For me good e-readers are minimalistic to look at and the content already has a structure that I'm not going to mess with. It's for reading only, not editing or writing.

I don’t have the intention to reinvent e-readers either ;–)

But I wanted to show a (proof of) concept that TW could be a nice tool to author content that later could be published in other formats, e-book-formats amongst them.

Writing on the other hand is all about editing, playing with the structure, granular control (to paragraph or even sentence level), the ability to move things around, generating a toc, indexes, bibliographies, notes on notes etc. A good writing tool also enables creativity by hiding the bells and whistles away until called for.

No objections. I will not be able to cover all that, but others are working on tools for e.g. bibliographies.

Maybe this plugin/edition should be split into two? An e-reader for TW and a Writing tool for TW.

For the foreseeable future it will be split in four plugins (work in progress), combine as you like: https://tid.li/tw5/test/concept.html#1-telmiger

MyStory, Reader Mode, StoryAdmin and x-tag were developed in the context of this Concept.

Thanks again for writing down your inputs. Such feedback is very valuable!

Cheers,

Thomas

*KISS principle: Keep it simple, stupid.

[Thomas Elmiger]

Hi Mark,

Thank you for asking! Please ask more if you would like to know more.

I think I'm going to need more information. I made a tiddler and almost immediately lost it. Then I had to dig for the recent tab to recover it.

This TW is conficured with authoring in mind. It inserts tiddlers at the bottom (standard TW setting option) where I would continue writing my story. But of course if you have a story list of more than 150 tiddlers like in my example, then the bottom of the list is (too) far away.

When I "wrote" (actually copy-pasted) the book I changed to a new story list after about 25 to 30 tiddlers because navigation got a bit awkward on my 15" screen.

I think I don't understand the "loading". Is it loading an entire new set of items (replacing the old set), or is it adding to the story river?

There are two buttons: Load replaces the present story list with the newly loaded one. The plus-button labelled "Append to story" – well, appends tiddlers to the present story. I hope that part is English and understandable?

At the end of the writing process I assembled the five parts (story lists) of the book by appending them all to the first part.

I think you previously had buttons in the menubar that would allow you to add new items in place? That seems to have disappeared.

I don’t think so, but it is a great idea! I guess an "insert below" button like the bookmark button would do? I can’t tell when I will find the time to try this ...

 

Thanks again, very much appreciated!

-- Thomas

[Watt]

Hi Thomas, thank you for your work and the helpful explanations. I'm going to take a good look at the reader/writer again tomorrow!
Best wishes

[Watt]

I had another look Thomas, and your explanations helped, but you need many more explanatory signposts up on the site. I really like the complex functionality you are working towards. It is a complicated beast though, a bit like a powerful sports car with all the engine and mechanics on the outside and the sleek, polished bodywork hidden underneath. It may not be ready for the luxury showroom yet but when the mechanics are tuned and hidden away Reader/Writer could be a classic vehicle.

I'm using a phone to look at it so that makes navigation harder. If I sound negative it's because I'm trying to drive this baby manually, with one thumb and one eye on the road. You need more 'driverless' options on it!

The short version for Reader; I want kindle style interaction, but with super-charged annotation/clipping options and easy import.

The over long version;

I'm going to go Marie Kondo on your visuals Thomas. They don't spark joy. First up is the landing screen. Where is it? I'm an idiot and a phone zombie, so when I open an app (I'm calling it an app) I need to see a blank screen with 2, maybe 3 buttons. That's all I can handle.

On this app I'd like the buttons to be 'Reader', 'Writer', 'Settings'. I don't want to see a sidebar, obscure tabs or any TW mechanics buttons, I don't want to know about config options (yet). I'd prefer not to have any text, just icons.

The reader mode icon that you have at the moment doesn't say 'Read' to me Thomas. Here's an alternative from the Noun Project on WikiMedia <a title="OCHA Visual Information Unit [CC0], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Education_-_The_Noun_Project.svg"><img width="512" alt="Education - The Noun Project" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Education_-_The_Noun_Project.svg/512px-Education_-_The_Noun_Project.svg.png"></a> (I hope that link works on GGs).

You don't have a Writer icon yet, but you need one. Here's an e.g. from the same source <a title="OCHA Visual Information Unit [CC0], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Learning_-_The_Noun_Project.svg"><img width="512" alt="Learning - The Noun Project" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Learning_-_The_Noun_Project.svg/512px-Learning_-_The_Noun_Project.svg.png"></a>

imo, on startup these 2 (or similar) should be all I can see, plus a Settings Cog icon. No sidebar, no title - nothing. If I want to know what the app does I go to Setttings, then 'About'.

Marie Kondo is very big on boxes. She says every object should have a home, use smaller, open top boxes within larger containers to categorise objects by size or function and fold/store everything in a way that allows it to be seen once the biggest container is opened.

'Reader', 'Writer', 'Settings' are your 3 top level containers. Everything else should fold away in progressively smaller boxes beneath them. You use MyStory as a box label. I think you need to change that everywhere to 'Writer'.

You know how Marie Kondo takes all the clothes out of the cupboards and piles them up in a mountain on the bed? First of all the owners are amazed at how much stuff they've got. Next they have to go through each item, discarding the ones that don't spark joy, and then categorising the others, folding them in a special way, before putting them in smaller boxes according to type.

I think that's what you need to do with your sidebar tab 'containers'. You've got everything in there, jumbled together, very difficult to find, not obviously labelled by function or findable for a newcomer. Clear instructions are difficult to find. If you threw it all into a pile you'd be amazed at how much is there but you have to go through it, discard some, re-categorise some and break it all down into smaller units, each with their own 'box'. A 'help' pop-up for each box might be necessary.
Then you need easy, clearly labelled navigation between each box. Personally I hate the sidebar in TW, imo everything you have in the sidebar should go under 'Settings' and that should have a page of its own.

Ok, imagine we've got a 3 button landing screen. When I click on the Reader icon I don't want another tiddler to open below. Scrolling on a phone is out for me. (Sidebars are out too. Scrolling through a paragraph list in a sidebar or getting dropped back to the end of a book long story river, with a sidebar on top is really out! (A 'return to top' button is essential if you're determined to keep the scrolling).

On clicking Reader I'd like the 3 icon landing screen to disappear and a simple Library page with these options to appear;
'List of Titles'
'Import New title'
'Writer' icon
'Settings' icon.
Back and Forward arrow heads for navigation.

We're in standard kindlish e-reader territory now.

If I click on the 'Writer' icon it should take me to the top level of the writer mode. It shouldn't toggle the 'reader library' into a 'writer library'. The exit from one function to the other has to be clear. Again, no story river, no sidebar, no headings. Each new page/screen replaces the last.

('View in Writer' is a different thing and needs a different icon.)

If I click on a title in the library for the first time I'd expect it to just open the book at a toc, maybe at page 1 if there is no toc. (Maybe at a 'last read point' if I've started the book already).

When reading I would like you to extend your pop-up bookmarker and change it to a pop-up with these selectable options;
'bookmark here'
'my bookmarks for this title'
'make clipping' **
'my clippings from this title'
'go to..' > page number
'go to toc'
'go to library'
'Open in Write mode'
and 'home'. (Home being the first landing page).
'Settings'

I'd like to turn pages like an e-reader does. Moving backwards and forwards a page at a time, no scrolling for me, but it should be configurable in settings.
A pop-up with navigation options should always be near to hand.

** How you would make a clipping from within Reader I don't know, but for me this is what could make your Reader indispensible.
If I'm reading an article or factual material I want to make annotations with notes. Not many e-readers do this well. TW should be able to do it in theory, but I'd like to be able to just highlight text and click 'make clipping', without going into edit mode or leaving the text I'm reading. BJ's tiddlyclip works on desktop but not on mobile.

Well, having written all that I've just realised that Import is going to be quite import-ant. How do I do it?

I'm going to try Writer another time Thomas. How do I install?

Thanks again for your work!

[Thomas Elmiger]

Thank you very much for this elaborate comment, Watt, aka Marie Kondo :–D

Did you really write all this on a phone? I am impressed! I will not answer everything nor will I be able to invent the ultimate TW reader application you are dreaming of – sorry.

So just some short statements from Mr. Picky here. Read with a ;–)

Am Sa., 19. Jan. 2019 um 13:42 Uhr schrieb Watt <charlar...@gmail.com>:

I had another look Thomas, and your explanations helped, but you need many more explanatory signposts up on the site. I really like the complex functionality you are working towards. It is a complicated beast though, a bit like a powerful sports car with all the engine and mechanics on the outside and the sleek, polished bodywork hidden underneath. It may not be ready for the luxury showroom yet but when the mechanics are tuned and hidden away Reader/Writer could be a classic vehicle.

I guess it will become a classic skateboard.

I'm using a phone to look at it so that makes navigation harder. If I sound negative it's because I'm trying to drive this baby manually, with one thumb and one eye on the road. You need more 'driverless' options on it!

Do you use text to speach for writing such long comments?

The short version for Reader; I want kindle style interaction, but with super-charged annotation/clipping options and easy import.

The over long version;

I'm going to go Marie Kondo on your visuals Thomas. They don't spark joy. First up is the landing screen. Where is it? I'm an idiot and a phone zombie, so when I open an app (I'm calling it an app) I need to see a blank screen with 2, maybe 3 buttons. That's all I can handle.

I like Marie Kondo without knowing her. And I like your explanations about her.

On this app I'd like the buttons to be 'Reader', 'Writer', 'Settings'. I don't want to see a sidebar, obscure tabs or any TW mechanics buttons, I don't want to know about config options (yet). I'd prefer not to have any text, just icons.

The reader mode icon that you have at the moment doesn't say 'Read' to me Thomas. Here's an alternative from the Noun Project on WikiMedia <a title="OCHA Visual Information Unit [CC0], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Education_-_The_Noun_Project.svg"><img width="512" alt="Education - The Noun Project" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Education_-_The_Noun_Project.svg/512px-Education_-_The_Noun_Project.svg.png"></a> (I hope that link works on GGs).

I will think about it. Guess you are right, my icons could be better.

 

You don't have a Writer icon yet, but you need one. Here's an e.g. from the same source <a title="OCHA Visual Information Unit [CC0], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Learning_-_The_Noun_Project.svg"><img width="512" alt="Learning - The Noun Project" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Learning_-_The_Noun_Project.svg/512px-Learning_-_The_Noun_Project.svg.png"></a>

imo, on startup these 2 (or similar) should be all I can see, plus a Settings Cog icon. No sidebar, no title - nothing. If I want to know what the app does I go to Setttings, then 'About'.

The sidebar is still standard TiddlyWiki. Not sure if I want to change that for my purpose. But I think there are solutions around to do what you want ... so you could add that yourself. Ah no – remove that yourself.

Marie Kondo is very big on boxes. She says every object should have a home, use smaller, open top boxes within larger containers to categorise objects by size or function and fold/store everything in a way that allows it to be seen once the biggest container is opened.

'Reader', 'Writer', 'Settings' are your 3 top level containers. Everything else should fold away in progressively smaller boxes beneath them. You use MyStory as a box label. I think you need to change that everywhere to 'Writer'.

Well, MyStory is the name of one of my plugins. You are welcome to use that for your Writer app and re-label it to whatever you like. I like out of the box thinking.

 

You know how Marie Kondo takes all the clothes out of the cupboards and piles them up in a mountain on the bed? First of all the owners are amazed at how much stuff they've got. Next they have to go through each item, discarding the ones that don't spark joy, and then categorising the others, folding them in a special way, before putting them in smaller boxes according to type.

I think that's what you need to do with your sidebar tab 'containers'. You've got everything in there, jumbled together, very difficult to find, not obviously labelled by function or findable for a newcomer. Clear instructions are difficult to find. If you threw it all into a pile you'd be amazed at how much is there but you have to go through it, discard some, re-categorise some and break it all down into smaller units, each with their own 'box'. A 'help' pop-up for each box might be necessary.
Then you need easy, clearly labelled navigation between each box. Personally I hate the sidebar in TW, imo everything you have in the sidebar should go under 'Settings' and that should have a page of its own.

Well, TW has kind of a standard settings page called control panel which is already cluttered enogh. As well as the sidebar, especially the More tab ... that has got nothing to do with my plugins, but you are right. So I draftet a slightly better solution (possibly removing the More tab) and filed an issue on Github:

https://github.com/Jermolene/TiddlyWiki5/issues/3716

You could do the same: Develop/Design a better solution and suggest to integrate that into the core. And TW would become slicker and cleaner tab by tab ...

Ok, imagine we've got a 3 button landing screen. When I click on the Reader icon I don't want another tiddler to open below. Scrolling on a phone is out for me. (Sidebars are out too. Scrolling through a paragraph list in a sidebar or getting dropped back to the end of a book long story river, with a sidebar on top is really out! (A 'return to top' button is essential if you're determined to keep the scrolling).

On clicking Reader I'd like the 3 icon landing screen to disappear and a simple Library page with these options to appear;
'List of Titles'
'Import New title'
'Writer' icon
'Settings' icon.
Back and Forward arrow heads for navigation.

We're in standard kindlish e-reader territory now.

And the functionality will stay there as far as it concerns Mr. Picky.

If I click on the 'Writer' icon it should take me to the top level of the writer mode. It shouldn't toggle the 'reader library' into a 'writer library'. The exit from one function to the other has to be clear. Again, no story river, no sidebar, no headings. Each new page/screen replaces the last.

Maybe no TW would be the best solution for you then.

('View in Writer' is a different thing and needs a different icon.)

If I click on a title in the library for the first time I'd expect it to just open the book at a toc, maybe at page 1 if there is no toc. (Maybe at a 'last read point' if I've started the book already).

When reading I would like you to extend your pop-up bookmarker and change it to a pop-up with these selectable options;
'bookmark here'
'my bookmarks for this title'
'make clipping' **
'my clippings from this title'
'go to..' > page number
'go to toc'
'go to library'
'Open in Write mode'
and 'home'. (Home being the first landing page).
'Settings'

Hm, I don’t have a pop-up bookmarker at the moment, just marks on tiddlers. I like the idea of options, but I also like simplicity.

I'd like to turn pages like an e-reader does. Moving backwards and forwards a page at a time, no scrolling for me, but it should be configurable in settings.

How do you use Facebook or Twitter or Google or your news Websites without scrolling? Scrolling on small screens is awesome!

A pop-up with navigation options should always be near to hand.

** How you would make a clipping from within Reader I don't know, but for me this is what could make your Reader indispensible.
If I'm reading an article or factual material I want to make annotations with notes. Not many e-readers do this well. TW should be able to do it in theory, but I'd like to be able to just highlight text and click 'make clipping', without going into edit mode or leaving the text I'm reading. BJ's tiddlyclip works on desktop but not on mobile.

Well, having written all that I've just realised that Import is going to be quite import-ant. How do I do it?

I'm going to try Writer another time Thomas. How do I install?

I’m not sure my plugins are what you are looking for ... you would be able to find them on my plugins page:

https://tid.li/tw5/plugins.html – I just updated MyStory (including bookmarks), Reader Mode is also present. StoryAdmin is a bit hidden and not up-to date I think. More updates will follow. Make a copy/backup first, then drag the links over to your test wiki.

Thanks again for your work!

Thank you again for taking so much time and for writing such entertaining comments. You made my day!

Cheers,

Thomas

[Watt]

"Do you use text to speech for writing such long comments?"

3 thumbs Thomas, on each hand ;)

I'm going to try installing the plugins and see if I can contribute something constructive back to you. It may take some time but you've done all the hard work. I think my suggestions are mainly about layout and appearance, from one mobile zombie's perspective.

Marie Kondo is on Netflix now. She's should be required viewing for app designers!

Thanks again for the great work!