Design trick discover classes and CSS in use?

[TW Tones]

Folks,

Many of you may know about using the Inspect in your browser development tools to discover css and other details while designing a wiki. 

I just discovered that Using the Core addon-plugin Internals allows you to preview the html generated inside a tiddler and this allows you to see and extract similar information for a given tiddlers content.

It makes me think what if we provide some alternate tools to do the same thing so we can see other elements of the whole page in rendered html as insight. Not forcing people into inspect for such analysis would be helpful to less experienced users. TiddlyWikis dynamic behaviours and multiple stylesheets and plugins can make this quite complex so the more tools we have the better.

• What do you think?
• Could you make something?

It seems to me TiddlyWiki is capable of being its own "Software development kit", and it would be useful if we can provision a few more tools so people can stay within tiddlywiki. While largely self documenting the complexity in the rendering of the final result suggest a little more support there will help.

Regards

Tones

[TiddlyTweeter]

TW Tones wrote:

... Using the ... plugin Internals allows you to preview the html generated inside a tiddler ...

Right! 

FYI I often use its as a quick way to copy and paste compliant HTML into online discussions that will take raw HTML.

It makes me think what if we provide some alternate tools to do the same thing so we can see other elements of the whole page in rendered html as insight.

One aspect that I'm NOT sure any TW tool could do is show "Shadow DOM"? I.E. stuff that you can see on-screen but is NOT in the HTML render code.

That includes, for example, things that CSS can insert---and that can be quite a lot (for instance: any CSS auto-numbering) .

It seems to me TiddlyWiki is capable of being its own "Software development kit"

Well, in many ways it is already that!

... and it would be useful if we can provision a few more tools ...

Okay. WHAT specifically, some examples, do you find missing you need?

Best wishes

TT

[Jon Light]

Hi,

I have used Mozilla developer tools for ages and have been using them to write my own custom CSS to over-ride defaults in Tiddlywiki.

As soon as you get to CSS an informative tool needs to reflect the cascade otherwise it is not of much use and will probably frustrate users who do not

understand the cascade and doggedly poke away unsure why their custom CSS is apparently being ignored - a simple version of a tool that does not

tell the whole story can possibly do more harm than good?

In addition being able to click on a declaration and see where it was defined by which CSS file is very useful as is being able to test alternative values

'in browser' with those effects being blown away  as soon as you refresh is a great asset. I usually work out my proposed changes by this method before

changing any real CSS files or tiddlers.

Unless browser developers expose the API for the code that interprets the CSS cascade and is able to display it within  their own developer tools then would it be

necessary to write a CSS processor for this project with the inevitable updates and revisions on account of inevitable  discrepancies  with CSS standards

and developments in CSS?

I assume that the Mozilla team work hard on developer tools - so I am guessing a lot of catch up unless large chunks of functionality are available open source, even

if catch up is possible then whats to guarantee an easier or more intuitive tool? Presumably the Mozilla ( or whatever browser ) developers are reasonably proficient at

usability and have done a reasonable job?

I am dubious regards the value of a lesser tool for users who are open to the idea of learning more - eventually they may start asking for the sophistication of browser

developer tools and those are already available. 

Are talking here only about users who want to experiment with CSS but are guaranteed never to want to progress past a certain point?

I guess you always run this risk when you develop a cut down  or simplified version of something that is already 'out there' - what parameters on project scope

are to be put in place to ensure that the final product after much work is actually "wheel number 2" - project scope creep ?

Sorry to sound negative :-)

[TW Tones]

Gentlemen,

Ideally all the standard css elements in a tiddlywiki would be documented. eg I want to change the background of the tiddler title, the text color, the icon . Many are documented in a defacto way in the palette settings. you can see the class name that is set, but many elements are not. even although one could say they are "hard coded" in tiddlywiki ie Tiddlywiki has a whole set of classes for various elements on the screen, where are they?

Every time someone is looking we tell them (if we know) we use inspect and find it for them, but its an an element at a time. What ever the answer I want to improve this.

I can imagine a custom edition of tiddlywiki (or content in a tiddler) in which mouse over any element has A popup documenting the css used to style the element would be a nice addition to the documentation.

Jon - Are talking here only about users who want to experiment with CSS but are guaranteed never to want to progress past a certain point?

No, what we need to do document what tiddlywiki does and peoples hunger for learning will prosper if it is not such a chore.

Tones

[Álvaro]

Ideally all the standard css elements in a tiddlywiki would be documented.

I don't understand it. ¿standard css elements? CSS is the tool and its use in TW is another way to use it. This use is shown in the style tag, in the case of TW. I agree that look in styles is tedious. It is easier use the inspector. But, IMHO, the problem isn't in the non-documentation, it is in its size. The CSS would need a hard reworked with great refactor.

[TW Tones]

Álvaro

I am not sure I agree. If we ask a question in this forum, eg; how to I put  background on tiddler titles, they will tell me a class name, a pallet setting or a tiddler in which it is set. yes we may be able to reverse engineer tiddlywiki to find such information. yet I do not see why we cant document this so anyone of any skill, can find where or how to style or restyle any element in tiddlywiki. The questions can be asked in advance, and answers given in a reference.

Regards

Tones

[TiddlyTweeter]

TW Tones wrote:

... I do not see why we cant document this so anyone of any skill, can find where or how to style or restyle any element in tiddlywiki. 

It is an interesting issue.

In my understanding the CSS (cascade) in TW is quite rich. 

But actually very logically  additive. 

Much cleaner than is often the case for websites. 

That is a lot to with how classes in CSS relate to its HTML architecture.

HOW to explicate this better? Not sure.

One  comment: I found studying what Thomas Elmiger does in his BRICKS plugin immensely informative because he slices up "Vanilla" into smaller units that clarifies a lot what is going on in the "cascade".

The other, more widely used approach I think, is using browser "inspector" tools whilst coding. That has immediate upsides. BUT also can have its own problems in that dynamic use of CSS can confuse the picture even with that.

Just comments

TT 

[TiddlyTweeter]

TW Tones

I vaguely recall someone was writing a guide to TW and provided a flowchart of the the major classes?

I can't find it on my computer. If I do I'll let you know.

TT

[TiddlyTweeter]

TW Tones

I think it would be pretty easy to provide a LIVE HIGHLIGHT tool that dynamically shows CSS in action in the wiki?

(For instance giving a coloured border to different div elements)?

That might clarify the issues somewhat in a practical way?

Thoughts

TT

[Stobot]

Tones, for what it's worth, I agree with a lot of things you're saying. At my present state of learning TiddlyWiki (many years in the process now), CSS & TiddlyWiki classes are one of the last frontiers for me, and probably because there's no easy starting point. I'm not calling this out as a fault of TiddlyWiki to be clear - just an opportunity to bring out / generate more palette and layout developers! It strikes me that there's now a layout chooser in the standard control panel, but no options yet. With my own project of a layout that would be familiar to people who use Office every day, it's been a struggle figuring that out, which makes me wonder what we'd get from the user population if that were easier!

I also however agree with others that building something going to explain *everything* is probably too far, so in my head there's a dividing factor where something could be provided by going part of the way, and leaving the browser developer tools to go the rest of the way. If that sounds like a "cop out", I'd suggest we're already there. For example as has been pointed out, there's StoryTop and StoryLeft as tiddlers, but setting those to 0 doesn't actually move the story all the way to the top or left due to other classes unknown. 

You (Tones) may be focused on other parts like formatting colors etc. but my own interest has primarily been positioning and layout as I'm sure is evident :)  One thing on my todo list was to have a 1-page reference sheet of all of the main classes I was able to deduce regarding layout. Showing a picture of the whole standard screen layout, and marking the class or tiddler that controls each of the spacing. Seems like most of the spacing settings are all in the tc-.... .padding / .margin namespace. I have no way of knowing how many of these tc-.... classes there are in regards to layout, but if there are a limited number, this may still be doable. R language for instance does a lot of their core documentation on these 1-page printable pages (Cheatsheets) which are really handy. We could produce something similar as a visual reference. RStudio Cheatsheets - RStudio

Lastly just as commentary, my own (very possibly inaccurate) feel from watching this community over many years is that most of the experts here came in with some web development background first, and then are trying to learn, and develop just about how TiddlyWiki does things. I conversely come from nearly the opposite background of having played with TiddlyWiki and other low-code programming languages for a long time, can make really useful and powerful things (I build business apps for my corporation on the side), but struggle the most on changing the look and feel. If I reflect, I guess I interpret things that way because when the question is around say generating a list of things, we see really great, detailed walkthroughs of how it works, watchouts, step by step answers which are awesome, but to your point Tones, when it's a formatting question, the answer is more like - "It's easy, just use CSS!" or pointing to some other highly-customized wiki somebody else has made. The implication is that we already know how to reverse-engineer css and the TiddlyWiki classes. Again, not criticizing in the slightest - we're all here voluntarily, just an observation that I feel like I'm coming from a minority perspective. 

[Álvaro]

TW Tones

I don't know if I am not understanding you, vice versa or both aren't understanding the other.

What is the standart CSS element in TW?

I agree If you talk about a explaining The CSS of general layout of TW. But in the decorative aspect, I think is more complex and hard to mantain due to a element can use different selectors and classes.

[TW Tones]

All

As I understand it, and I am happy to be corrected, tiddlywiki has page and edit/view templates that contain html. This consists of html tags and classes, and other targets for which we then have css that applies various styles, in some case it involves a few layers of selectors, in others is should be straight forward. It should be a simple matter of extracting these and documenting them. Sure once you go deep inside nested widgets and other objects the css may be more complex, but users of the basic interface should be in a position to customise the basic elements.

If I look into the page template, I discover it uses the class tc-sidebar-header

using the following filter [search:*[tc-sidebar-header]] -[search:*[.tc-sidebar-header]]

I can find in which tiddlers it is used but not defined or [search:*[.tc-sidebar-header]] where it is defined

The point being in the end I may find and manipulate the element I want, It would however be far easier to refer to a cheat sheet, highlight tool etc as TT and Stobot have highlighted.

Perhaps standing back and looking at how to manipulate various elements may result in some tweaks being developed to support this more easily.

Regards

Tones 

.

[springer]

I'm afraid I just startled my neighbors with the sound of my jaw dropping after setting up the Internals html preview. ;)

Given how extensively I use telmiger's details widget to structure long stretches of text, and how often I just want to copy-export a bare-bones html that retains the drop-down details structure for quick navigation, this is a brilliantly helpful bit of advice. 

Thanks, Tony!

[TW Tones]

Springer,

You are welcome, there are so many of these kind of "Easter eggs" in tiddlywiki. I think sometimes we miss this when the forum is responding to questions or problems, when instead I think their is a need for conversations around a subject. 

Regards

Tones/Tony

[TW Tones]

On this subject of identifying css see my other thread where I would like to customise the checkbox css in the view Toolbar.

It seems to me perhaps all it takes is documenting the selectors for particular elements, and or perhaps introduce additional ones.

Regards

Tones