Calling all devs in the Community 📢

[Karthikk]

So I have some great news for the hackers here
The team wants to support the devs in the community as much as they can, to begin with things like documenting all the CSS selectors, cleaning up the CSS and making it more user-friendly etc.,

So, now is the time to speak up guys, get together, document the hardships you all have faced while hacking your way through custom CSS or plugin development and I can bring in the dev team to brainstorm alongside you all to come up with a novel solution that is beneficial to the community here

Thank you all for being so patient, and also helping the community with your hacks.

Now, tell us, how can we help?

P.S. I will be happy to arrange a community call with all interested devs, to brainstorm together. Let me know here.

CC: @Martin @DeWil and @hannesfrank (our CSS wiz)

[hannesfrank]

I heavily agree with having more documentation for RemNote’s customizability.

Regarding cleanup and more user-friendly/powerful interfaces, here is a summary:

Custom CSS

Here is a list of suggested markup changes I wrote over the time:

• [Poll] Should we further improve the markup? quite old poll and discussion about this topic.

• Custom Rem-level formatting with tags still contains a few general issues I have with the markup. More specific suggestions are in:

  • Guide: data attributes contains data attribute related improvements.
  • WIP: Stable Markup: Show Tags incomplete post about a general Custom CSS problem I see: Some small UI elements (e.g. tags buttons, toggleButton) should always be present in the DOM, and just hidden with display: none when not hovered. This would 1. leave people more options for customization (e.g. always show the toggle button for all pages on the rem) and 2. allow easier inspection with DevTools without pausing JavaScript execution with F8.

• Community Project: Modular CSS Theme This could be used to document selectors and show their usage live and in action and provide a repository of snippets to copy, remix and further customize into own styles.

  • I planned publish some dev helpers with a similar intention on the Library as well.

---

Some thoughts about a more long term UI refactoring. (Note: I’m not saying that these things are correct and this is how it should be done. It’s very likely that I just have no idea how things work. These are just some ideas to discuss and possibly throw out the window.):

• There are a handful of good themes linked on awesome-remnote. We should make sure they continue working as best as possible, e.g. by providing a migration guide documenting the changes (this was well done in the November 2020 udpate) or manpower from the community or the dev team themselves.
  • I personally can make sure everything (I published) on the Library works. I intentionally kept the number of published styles scroll for that reason. I have planned a number of additional metadata like compatible RemNote version, and a featured/official flag indicating long term support which would it make easier for me to just upload more experimental stuff. This rework should be incentive for me to finally implement automatic version checking or even automatic updating.
  • I’m not sure if there is a semi-automatic way to do this. Eg. dumping the html before and after an update and check if the selectors of a theme still select the correct elements. But most likely this is totally overengineered and not very valuably spent resources.
• One must-have for a Custom CSS friendly design is a consistent naming scheme and almost flat, class only selectors.
  • Consistent naming is mostly for my OCD, but also useful for writing CSS from memory. Apart from that just looks like good practise and high quality software.
  • Flat selectors make styling more predictable and you don’t need to check the Styles panel of Devtools frequently to see if you need to prepend another #hierarchy-editor to have a high enough priority. It keeps selector chains short, easy to understand and maintainable. Roam does this well with their .rm-* classes.
    • I think some component-local nesting is acceptable, e.g. .search-result__container .item, but then you could also just use .search-result__item.
  • Last I heard Roam was being reworking to BEM I think. Maybe there are some lessons learned from their process already.
• Make sure to name every semantically relevant item with a class. There are quite a few cases in the Library where elaborate :nth-child chains are required. I feel these are especially fragile.
• If I understood correctly currently RemNote uses a single large, nested, manually written SCSS plus some Semantic UI components. Flattening the manually written styles out using unique class names (e.g. by using BEM) could become hard to manage (i.e. requiring much developer discipline to keep consistent). Besides BEM and similar CSS conventions there are other technologies/organizational approaches to consider:
  1. A utility-first CSS framework like TailwindCSS
  2. CSS in JS like Styled Components or Emotion
  • In both cases the styles would be applied by a set of single classes which are easy to overwrite.
  • The semantic classes to name components would not necessarily contain any styles at all then. They are just there to identify a UI element to let it be targeted by Custom CSS.
  • They are easier to maintain than a large CSS file because styles can be locally defined on the component. (Again, I don’t know what RemNote does internally. Might be that this is already the case.)

Plugins and User Scripts

Plugins were less of my focus lately. My next goal on this front is to make a simple slider plugin that simply renders and updates some children’s content. I’d personally favor a github template + a workflow to github pages here though glitch can do the same with remixing and a project being automatically hosted.

Discord@panopticon’s Table plugin (GitHub - samuelnunoo/RemTable) also pioneers some novel patterns like storing plugin settings and runtime data on a dedicated page. I think this should also be supported by the API directly at some point.

For better integrated plugins see

• Editor Commands Pt. 1 (Click on Rems with JavaScript) and the original Native Plugins (Custom JavaScript)
• Ability to create all content via API [and RemNote flavored markdown] (paste syntax)

Obsidian’s API can function as a role model here:

• Nicely documented TypeScript API installable with NPM
• Allows creation of all kinds of UI elements like toolbar buttons and settings dialogs

---

A global interface to savely insert data into the IndexedDB and to paste text into the rich text editor could enable all kind of hacks like Smart Rem. These can then function as a playing ground to explore ideas which - if proven useful - could be in incorporated into the

[chokypower]

Thanks for reaching out to the dev guys! My reply will not be nearly as long or well-informed as @hannesfrank 's, but here are some things I struggled with in the past that could be improved by your engineering team. All of what I will write is purely from memory as I don’t keep any documentation on the issues and ideas I’ve had with RemNote:

• HTML markup changes when a rem is hovered or focused. Notably, the IIRC the separator symbol will move down one step in the parent-child hierarchy, which makes it extremely hard and in some cases (e.g. when there are external links) impossible to style the text before and after :: consistently. Please also remove the zero-width element after the separator symbol.
• If a rem is zoomed in (i.e., it becomes the title of the page) then there exists no markup to distinguish it’s front and backside whatsoever. Ideally the HTML of a rem as a title should be at least very similar to regular rems in the document.
• Make it easier/more intuitive (for a novice person like me) to change the appearance of a rem’s children. Because every rem consists of a jungle of smaller elements (whose markup changes on hover and focus, as stated above), I find it very challenging to manipulate the styling of children based on, let’s say, the tags of a parent.
• Make it possible to style the appearance of rem references to children based on the tags of their parents. I’m guessing this would take a little more effort but it would be immensely powerful. At present, the reason why a rem reference can be styled is because the referenced rem retains the “data-rem-tags” propery of the rem it references. In theory, I think it could be possible to add a property called “parent-data-rem-tags”, which will list all tags that a rem higher in the hierarchy posseses. Another property called “direct-parent-data-rem-tags” could also simply list all the tags of the direct rem parent. Again, I have no idea who to do this, I am not a software engineer, but you could do great things with this. For instance, you could have a rem called “People” under which you collect all of your notes and thoughts on historical figures, politicans or whatever. If you then tag this one rem with a certain tag, let’s say “peopletag”, and define a new css rule “.rem-reference-container[parent-data-rem-tags~=peopletag] > span { background-color: whatever; color: whatever }” in the Custom CSS, then all of the references under “People” will take on a particular styling. I can do the same for a rem called “Years”, or “Places” etc. So if this is possible, imagine what my history notes can look like. Basically I can see at a glance all the important backlinks and their meaning. The medicine folks could do something very similar with “Symptoms”, “Anatomy”, etc. Currently, I would have to spam “peopletag” on every single rem in order to accomplish this. However, doing so is not very sustainable as it is not possible to bulk remove tags AFAIK.
• I remember trying to style search portals in the past and it was impossible for me because of the awkward HTML structure of the portals.
• Make it possible/give some documentation on how to manipulate whether or not a rem reference also contains it’s parent or parent’s parent. The current design disincentivizes heavily nested rem hierarchies, even though part of RemNote’s strengh over something like Word (don’t laugh, this is how I used to take notes) is precisely it’s hierarchy editor. The reason is because if I write something like “25th June 1950>North Korean troops>38th parallel>cross over to South Korea” and I reference the last rem in the hierarchy, then I can only see the last rem in the rem reference. In other words, as soon as I want to use something as a rem reference, I must condense all the essential information in a single rem. Naturally, I have adapted my workflow to account for this, but I think it is important to recognize that there is an inherent friction between rem references and stuff like universal descriptors. Allowing users (or at least developers) to freely modify and customize how many rem parents should be displayed for a particular rem, a group of rem, or all rem will create great possibilities for new workflows. From an engineering POV, I suppose you could have all parents present as an HTML element and simply disable them by default through “display: none”. Custom CSS would then make them (re)appear. This of course means that each parent level needs a unique identifier first.

[UMNiK]

@chokypower

Make it possible/give some documentation on how to manipulate whether or not a rem reference also contains it’s parent or parent’s parent.

To be clear, at the moment you can click any reference and “show full name” to get a condensed list of breadcrumbs. I assume you want the option to have the full list and/or a subset of breadcrumbs.

[chokypower]

That’s true, I forgot about that. I would like to have control over (1) how many levels are displayed for (2) multiple rem in bulk. Another problem, as evidenced by your screenshot, is that there is a length limit for how long parent names can be.