How Much Effort Would a Completely New UI be?

[Sunny]

Hello @LoryMoney,

@LoryMoney

I am thinking of websites like Amazon, Facebook, etc… that do have a “modern web app feeling” (built with something like React, etc.), powered by TW but where a user wouldn’t guess it’s TiddlyWiki.

Not knowing your background or skill set, I would take a look at some other threads.
CSS Grid and Flexbox have been used by others on this forum.
Namely @Brian_Radspinner , @BurningTreeC and @Mohammad and others.

Grid CSS in Tiddlywiki Demystified
Grid CSS to Create a Vertical Tab Like Structure
Grid CSS to Create Left Sidebar and a Story River

Tutorial: a basic alternative layout

TiddlyFlex - a new Flexbox Layout for TiddlyWiki
TiddlyFlex v0.7.12

I hope this may give you an idea on what can be achieved and adapted depending on your timescales.

[LoryMoney]

Thanks all for the responses, interesting resources emerged from the question, I think @Brian_Radspinner tutorial might be a good place to grasp the basics.

@pmario

I guess: 6 man months full time - Excluding 2 months of planning and designing new reusable elements. If you want to make accessibility a main feature, you can double that time

Wow! My uninformed guess was a couple of weeks of merging and joining already made solutions, I can see that the 1year full time job implies that it is not a simple task at all.
I think it will be quite cool to have Wordpress like UIs with TWs backend.

[pmario]

@LoryMoney

I can see that the 1year full time job implies that it is not a simple task at all.

It’s not complicated if you know the existing structure - It’s complex and a lot of work.

I have to say, that I am talking about a complete re-imagination of the whole UI starting at the PageTemplate level.

Others have mentioned some very nice tweaks to the existing UI structure.

Eg: The Notebook or the Navigator Theme, which imo look nice, but still have there problems, with palette switches. IMO palettes are highly important and they are quite some work to get right.

The existing palette mechanism is based on 2014 tech. At that time is was modern. CSS could not handle any variables. Our TW palette could. But now CSS can handle variables natively, which needs a fundamentally new CSS concept.

Look at the Memory Keeper UI which uses the Navigator Theme, but seems to make it’s own changes, which completely disabled palette change.

But IMO it has the best “Hide the right sidebar” feature of all themes I know.
You would first need to do some re-engineering to move everything into a new theme plugin to make it easy available. (I think it’s not available as a plugin. At least I do not know.)

A new PageTemplate concept that I have in mind, would make it easy to create a multi-column TiddlyFlex like UI. It should not implement it, but it should keep it in mind, so it may be easier to be implemented, as it is now. (OK this one will need some JavaScript modifications too.)

BTW TiddlyFlex is a mod, that defines most of the PageTemplates new. It’s a new layout.

Left Sidebar. Right Sidebar. … which one do you prefer. The new concept should make that one easy. …

There are probably a 100 more features, that are difficult to implement atm. There are a probably a 100 things, that we did wrong in the current structure, but backwards compatibility makes changes hard.

Keep in mind the UI did grow organically since 2014. Have a look at TW v5.1.0 and look at the Right sidebar → Tools or the ControlPanel → Info → Advanced and compare it with v5.3.8

The tiddler info system needs an overhaul. It contains a lot of useful information that is hidden by default. We need to move it to the bottom of the tiddler and make it available with 1 click.

Show Tiddler Info Screenshot

and - and - and
-m

[TW_Tones]

I gained more of a website look to an old, never finished and now abandoned blog site just bu manipulating a few existing features on an version of tiddlywiki. Had I used the single tiddler view many would think it was a stangard website.

• Move more out of the sideBar into the menus
• Also consider mobile or responcive views
• Consider speed and load times and SEO

https://tones-blog.tiddlyhost.com/

And use newer features as @pmario discussed.

@LoryMoney

How much effort and skill would be required to make a site that doesn’t look or feel like a wiki at all?

• Sadly as long as a piece of string. In any website design or redesign I have done for clients it all depends on how fussy and the details the client has and develops over the life of a project. It is never known fully at the begining.

The Key to doesn’t look or feel like a wiki at all

• Hide waway tiddlywiki specifics.
• Provision equivalents to commonly found website elements.
• Keep your revised elements independant of the underlying wiki so you can;
  • Apply elsewhere
  • Retain insight to your customisations for maintanance
  • Upgrade the underlying wiki

[CodaCoder]

@LoryMoney

How much effort and skill would be required to make a site that doesn’t look or feel like a wiki at all?

It took me a couple of weeks to shroud my wife’s portfolio TiddlyWiki for a university course. To look at, it’s much like a blog, I guess – certainly nothing like a TiddlyWiki. When viewed offline (i.e. locally) it’s a bona fide TiddlyWiki; online it’s a presentation piece. Indedd (and if I recall correctly) the visitor is invited to hit F11 on entry to make the presentation full-screen…

@LoryMoney

Is this realistically achievable with just advanced CSS, or does it require deep JavaScript and custom widget development?

No JS, 4.5 tonnes of CSS, 7 gallons of wikitext and a pinch of config settings (the vast majority of which I don’t now recall).

[Brian_Radspinner]

@LoryMoney

How much effort and skill would be required to make a site that doesn’t look or feel like a wiki at all?

The more skill, the less time, but it also depends on what you are trying to achieve.

If you are working from an existing layout ( your own or someone else’s ) you’ll probably spend more time just familiarizing yourself with all the TiddlyWiki elements that would still be useful and figuring out how to integrate them.

If you are starting from scratch—and not a professional web designer—it could be an endless process of working and re-working. My main notebook wiki is a constant experiment that never feels quite complete and tends to break if I get a brand new idea to try and integrate. I’ve recently put out a few past snapshots of my layout experiments that I think may be of interest to at least a few people.

I can quickly work out an idea to the point of having a usable result for my own use but I’ve never achieved a properly-polished layout that I would be OK handing off to others.

@CodaCoder

No JS, 4.5 tonnes of CSS, 7 gallons of wikitext and a pinch of config settings

This is spot on. Especially when I end up re-creating existing TiddlyWiki UI elements that are a relative pain to deal with because of the original HTML structure.

My main reason for even bothering with alternative layouts was, and still is, an excuse to keep learning about modern CSS, just for personal interest.

[CodaCoder]

This…

@Brian_Radspinner

I can quickly work out an idea to the point of having a usable result for my own use but I’ve never achieved a properly-polished layout that I would be OK handing off to others.

and this…

@Brian_Radspinner

it could be an endless process of working and re-working. My main notebook wiki is a constant experiment that never feels quite complete

is so true of TiddlyWiki – a tweaker’s paradise (or hell). See: When the joys become pitfalls

[Ittayd]

I see people respond by suggesting new page templates. IMO this will not drastically change the UI experience. What will is things like having ux to edit widgets, editing inline, a query language that is not unique only to TW, with a rich UI, etc.

[TW_Tones]

@Brian_Radspinner

If you are working from an existing layout ( your own or someone else’s ) you’ll probably spend more time just familiarizing yourself with all the TiddlyWiki elements that would still be useful and figuring out how to integrate them.

@LoryMoney this made me think of @EricShulman recently enhancing his pasteUp which is a way to present tiddlywiki in a graphical way but still including tiddlywiki content elements. In some ways this provides for “unbridled design” within a tiddler that can then be displayed as a page.

Also not TiddlyWiki could be used to build a website generator, exporting as pages content manage within it.

[tomzheng]

Neotw rolling — A modern notebook based on TiddlyWiki5

This centered page layout doesn’t look like a wiki.

My simple center layout is as follows.

My TiddlyWiki — a non-linear personal web notebook

[TiddlyTitch]

@TW_Tones

this made me think of @EricShulman recently enhancing his pasteUp which is a way to present tiddlywiki in a graphical way but still including tiddlywiki content elements. In some ways this provides for “unbridled design” within a tiddler that can then be displayed as a page.

Exactly!

The TiddlyTools - PasteUp.

It really helps visualize layouts.

The “visual” merit in working through a “grid” is design “feed-back”—tangible visible results—are quick.

In some cases you could easily use it to create a new “front end” without having to edit Layouts or Templates.

Just a comment
TT

[Scott_Sauyet]

@Ittayd

I see people respond by suggesting new page templates. IMO this will not drastically change the UI experience.

I disagree. I mentioned @Charlie_Veniot’s Basic Anywhere Machine above. Does that look like a wiki to you?

@Ittayd

What will is things like having ux to edit widgets, editing inline, a query language that is not unique only to TW, with a rich UI, etc.

Those sound like things that might well change the creator’s experience. But if I understand the OP correctly, the goal is to change the user’s experience.

[Charlie_Veniot]

@Scott_Sauyet mentioned my BASIC Anywhere Machine as an example of a TiddlyWiki that does not look like a TiddlyWiki anymore.

You might find it a whole lot easier to study this other TW instance that uses the same technique for laying an interface on top of the TW interface:

TiddlyWiki Bare-Bones User Interface

https://tiddlywiki-programming.neocities.org/BBUI Do you want to play the “let’s build it, one little piece at a time, game?” Tell me one single and small thing, just one, that you would like to see added next. Once I’ve added it, then I’ll ask for what single/small next thing should be added. Slow, incremental. I’ll be ignoring laundry lists, and will likely be ignoring all ideas for the next thing while I’m working on one thing. I’ll likely only be paying attention to the first-come-firs…

[Scott_Sauyet]

@Charlie_Veniot

You might find it a whole lot easier to study this other TW instance that uses the same technique for laying an interface on top of the TW interface:

I’d forgotten that. I’d love to start playing that game again, but can’t get to neocities from within GigantiCorp. I’ll try to look tonight, and make a new suggestion, if you’re still interested in following up.

– Scott

[Charlie_Veniot]

Really, I completely lost interest in that thing long ago. Too many shiny objects fighting for my attention, never enough hours in a day.

[LoryMoney]

@CodaCoder

It took me a couple of weeks to shroud my wife’s portfolio TiddlyWiki for a university course. To look at, it’s much like a blog, I guess – certainly nothing like a TiddlyWiki

The result might be interesting, is this something you want to/can share?

[CodaCoder]

@LoryMoney

is this something you want to/can share?

Unfortunately, no.  

[LoryMoney]

@pmario

There are probably a 100 more features, that are difficult to implement atm. There are a probably a 100 things, that we did wrong in the current structure, but backwards compatibility makes changes hard.

Definitely backwards compatibility is a core feature that we can’t afford to lose, but what about a codemod script that takes a wiki and rewrites it to be compatible with modern CSS?

@jeremyruston

“TWX”, which is a future re-working of the TiddlyWiki core that would distill everything we’ve learned from TiddlyWiki 5 but wouldn’t be backwards compatible. It might be very different than TW5: for example, a kernel written in Go or Rust that runs under WASM in the browser. My current thinking is that the first incarnation might not be a wiki at all, but a Figma-like shared vector editor with all the organisation, transclusion and composition features of TiddlyWiki.

I guess TWX might eventually come to save the day

[Sunny]

May I add another suggestion, Thomas Elmiger’s Plugins
A number of items on this page show layout options Tix being the latest, simpler versions such as Btx Bottom toolbar experience, Lox and Tix - A new kind of tiddler experience – incredibly flexible and configurable thanks to several parts: top, header, the standard tiddler body and a footer.
See Tix configuration for example.

[TW_Tones]

@LoryMoney

I guess TWX might eventually come to save the day

There are a lot of ways to customise the the current Page Layout and all elements, so personaly I would not bother. But I can understand someone may want to change things.

• Remember you can load more CSS into you wiki and use it as desired
  • However I recomend at least initialy new page template and the ability to change layouts ctrl-shift-L to select.

See this earlier example of a TiddlyWiki as Kanban Tekan — Kanban that stays with you

• You cant even see its a TiddlyWiki

New layouts are effectyivly a different front end

• The advantage of this approach is you can switch back to the familular interface to do sophisticated changes, add tools and features etc… that you may add to your front end.
  • For Example Maps, Calendars, PastUp that @EricShulman has developed.

But perhaps there is no need to wait for TWX as there are bigger changes that may not be backwardly compatible for TW 5.4 being discussed.

• I think there is an argument to add more hackability to change/replace the front end if someone wants to do the work, but I belive we need a few tweeks in the PageTemplae process.