FONTSIZE?? What do you mean??? 
12 Likes
Hahah. That was amazing. Good job!
you took it to the next level!
Would you mind sharing the Css code?
5 Likes
Haha, that’s amazing! how do you do that?
For those wondering: I made these by injecting some JavaScript into the page fixing the markup. You can do this e.g. with https://violentmonkey.github.io/, but it does not work well with Single-Page-Applications so we need a native implementation. Or Native Plugins (Custom JavaScript) for that matter 
Also bumping this to the top of Latest 
5 Likes
Great job as always! Goes much beyond simple “formatting” - that’s full on “styling”!
Would be great if this could be coupled with the existing templates functionality. That way, if I tag a Rem with #person, for example, not only I get the slots for that (Name, Picture, Phone, Address etc.), but also these slots appear in a certain layout (for example, picture on left, info on right).
I think RemNote would greatly benefit from allowing content to be structured like that (after all, slots are already like variables), and endlessly leveraged to do all kinds of things. Especially once queries get more powerful.
Not long ago I got really into Tiddlywiki, which allows a lot of customization and complex queries. Too bad it has very limited/awkward editing/formatting experience. RemNote is the opposite.
Anyway, I digress. Great experiments there! Keep it up!
4 Likes
Thanks for the comment. This is a great idea! I updated point 2 above. Turns out that RemNote already records TypeParent-TypeChildren relation in rem-data-tags. I’m pretty sure now that this is what they are for in the first place, since tags are RemNotes typing/inheritance mechanism. I makes sense now that tags are applied transitively as well, i.e. having Book #Publication and How to Take Smart Notes #Book lists the latter as #Publication as well. It is buggy though.
@ognsya Could you please post a person template of how you would like to have it styled? I would like to try that. I am taking from your comment that you had it customized in TiddlyWiki already?
3 Likes
@hannesfrank I did implement some stuff in Tiddlywiki, but I don’t have it anymore…
I don’t really have any specific layout in mind for this… I just used #person as a basic example of the benefits of styling. Different data structures could benefit from other layouts, of course. Ideally RemNote will allow any user to create their own, via some simple scripting/styling language (possibly via the plugin system, I guess).
Your Pros/Cons proof-of-concept is a great example of that - it’s simple, but very helpful, since it provides such a specific functionality.
2 Likes
Nice! I hope RemNote devs are keeping an eye on everything you’ve been doing.
PS: so you’re from 2099. That explains a lot
7 Likes
Holy crud! That’s awesome!
I’m actually starting to become interested in coding because of posts like these.
5 Likes
Wow, these examples are incredible @hannesfrank!
For “Allow to add and remove tags via the API”, what flow did you have in mind for allowing you to add tags via a shortcut? The only flow I can see here is 1) trigger a popup plugin with a keyboard shortcut 2) the plugin adds a tag 3) the plugin closes itself.
What do you think about providing an option to directly link keyboard shortcuts with tags, instead?
We’ve implemented these changes so far - am I missing any particularly important ones?
- HTML structure simplifications for easier Custom CSS (
#hierarchy-editor-referencesand.hierarchy-editor__tag-barshould be outside.rem-text) - Added data-document-tags (document level) and data-rem-container-tags (subtree level) selectors to augment data-rem-tags.
- Less tag normalization.
- Added a “separator-symbol” class.
- Semantic CSS classes at the subtree level (new tree-node-container-* classes)
- Allow indented and hidden code blocks on Custom CSS.
5 Likes
Yes, that is exactly how I imagined a plugin could work. A native implementation to add/toggle tags using a shortcuts would be even better of course because it eliminates the loading time. I would still love having more things exposed for programmatic access. I wrote a bit about that too and maybe post this later (think: everything is a remcommand, like in modern text editors).
For example there might be cases where you want to cycle through 3 tags with a single shortcut.
For now one can also use auto(hot)key or something similar to associate a tag with a shortcut. So it is not super high priority on my list. You can not remove the tag again though.
Yes, I think you got the highest value/time ones! Thank you very much!
Having the normal and focused markup play nicely together is hard I guess because it is created by the slate editor. That would be my next wish. Maybe you could at least leave the hover markup unchanged for now?
Here are some more wishes which make styling for active recall practice easier:
- Wrap key/name and content (front and back of a card) in an extra element. I think we have this for unfocused rems, but not for focused/hovered ones. (Again, IDK anything about slate.)
- Add data tags for practice status, i.e corrects in a row, last time wrong, due/in queue.
Semantic CSS addendum:
-
*--focused(and*--hovered) on all ancestor nodes. Sometimes I also want to disable styling of a group of rem if one of them is focused. I don’t know if this is practical for performance reasons (probably yes because hierarchies are not that deep).
I’ll report back when I find more stuff that can be improved.
6 Likes
I’ll release it as copy&paste and/or tutorial when Martin rolls out the changes described here.
Yes it does! I did not know that. Using standard CSS directly is of cause better than any custom classes.
1 Like
Not a technical person here, but I love the ideas in the screenshots! Makes it much better to use and integrates perfectly in my worklow. Although I am not that sure about the columns thing since I use the side pane feature a lot, I think it might impact the way columns are seen.
Anyway, good luck to devs if they are wishing to develop this further.
4 Likes