Code review needed! BLC Plugin 0.2.0 - Release Candidate 1 (Soon to be Dropboard 1.0.0)

[Reid Gould]

BLC Plugin (soon to be Dropboard) is almost complete, all features and interface changes have been done and are ready to be finalized. Internals have been refactored and tidied up. 

But before the big rename and version bump, it could really use the one thing it hasn't gotten yet, which is a good code review. 

The plugin is entirely implemented in WikiText, Widgets, and Macros. No original Javascript is used. As WikiText is very dense, there is actually not much code. The unminified built tid file for 0.2.0 clocks in at 94 KB.

If there is anyone interested or willing to do me (and those in the community who use it) a huge favor by reviewing, I recommend starting at the main view template, "Board.tid":

https://github.com/reidgould/tiddlywiki-blc-plugin/blob/0.2.0/Source/editions/blc-plugin/plugins/blc/tiddlers/templates/view/Board.tid

The "User Guide" demo linked above will have many more examples of use and much more documentation when Dropboard version 1 comes out, but for now if you just try out all the buttons and drop areas (shaded) you should be able to see how most things are supposed to work. If anything doesn't do what you expect, I'm happy to chat with you about its intended purpose here.

All comments are welcome. If you have a GitHub account, I prefer issues to be started there.

At this time I'm mostly looking for any problems with the main macros that do the listops, display bugs (try out themes and different text sizes), or performance issues. Requests for changes to features or new feature requests are welcome, but won't be addressed till after version 1.

This has been a very fun project and I can't wait to finish it.

Thanks to anyone who takes a glance.

- Reid

[@TiddlyTweeter]

Ciao Reid

Not so much code-read as browser observation ... When you collapse to columns in the latest Chrome all is dandy ...


But in Firefox 52.3 64bit on Windows the formatting breaks.


Best wishes
Josiah

[@TiddlyTweeter]

Ciao Reid

Your have 4 identical icons on the same row, albeit with labels above ...



Even so I'd have DIFFERENT icons. "Filter" maybe a symbol of a filter (like a funnel). "Search" could be a magnifying glass. Height an icon we already have ...

Width something like that turned on its side.

Then you could also remove the explanatory text badges to make the layout more economical?

Best wishes
Josiah

[@TiddlyTweeter]

Ciao Reid

I would get rid of the outer dashes. I don't think they add anything--if anything they unnecessarily weaken the design.

Best wishes
Josiah



Best wishes
Josiah

[@TiddlyTweeter]

Ciao Reid

The "on hover" text for ...

... reads "Drop tiddler here to place in list position."

I suggest changing it to something like ...

"Drop tiddler here to title a new column."

Best wishes
Josiah

[@TiddlyTweeter]

Ciao Reid

I know my comments were not about code. But still relevant, I think. And I hope useful.

FYI I tried to break the basic functions but it seems robust so far.

Best wishes
Josiah

[Reid Gould]

Ah, great catch on the firefox title bug. This is the just the kind of thing I'm trying to weed out. Consider it done.

- Reid

[Reid Gould]

Josiah,

Here's a comparison with the side borders on and off. This image shows the case of a board that is partially scrolled in the horizontal direction. The borders are intended to reduce the broken visual effect of the list cutting of in the middle. If you have a suggestion for a different way to handle that case, I'd like to hear it.

 

- Reid

[@TiddlyTweeter]

Ciao Reid

Honestly I'm between a rock and a hard place. Between Riz's visuals and your superb logic. Not wanting to offend either of you.

The point is that the tiddler you asking me about is not scaled up to the point that its free enough yet. Of course it looks crap (in both versions), because the CONTEXT is inappropriate for wide flow. That would come with full screen takeover IMO. I hope you get my point.

Best wishes
Josiah 

[Mat]

Google groups and gmail use shading when scroll puts something out of view. Attached img shows long horizontal shade from vertical scrolling (never mind the dashed leftover). When no scroll, just plain 1px(?) line.

In your code I note explicit <p> tags, with style classes. In my experience it is typically enough to style with

.someDicClass p {...}

i.e without explicit <p> tags.

<:-)

[David Szego]

Reid - Beautiful, beautiful work. Love this and can't wait to use it in my TW's.

Three thoughts -

1. rather than dragging a card onto the "Open in main story" block, you should just simply click the card to open it. Clicking the body of the tile seems to have no other use anyways.

2. The << and >> icons don't seem to do anything. I can neither click them nor grab them to drag/reorder columns. I would have expected that's what they're for.

3. The toolbar seems unclear. Maybe it just needs a help section? Not obvious.

Cheers,
David Szego (Cardo)

[Reid Gould]

Mat, 

Of course! I had to look no furthur than the page I was already on for a good precedent! Well, I think the dashes are going to be in version 1, but I'll look at a nice way of using that style in later updates. Maybe it will appease Josiah's scrupulous eye for design details. ;-p

In the case of classes on the "p" tags, I'm doing it for CSS Selector efficiency. When you use a descendant combinator (a space) with a very generic selector on the right like the "p", it means every time the browser finds a "p" in the entire document it will trace back up the tree all the way to the root html tag checking to see if any parents have the class (Writing efficient CSS selectors – CSS Wizardry). Usually, not really critical because CSS is fast, but in the case of TW I tend to get many things open at once so the effort is worth it in my mind.

- Reid

[Reid Gould]

David,

Thanks for your complement! I'm glad you like it. Cardo was one of the first Wikis that made me realize how much could be done using the platform, so thank you for the inspiration.

1. The origin of the "Open in Main Story" drop area is actually a solution to a technical limitation in TW's $navigator widget. Each of the lists on a board is implemented as a "story river" just like the main story. Clicking a local link in TW sends a message up the widget tree and $navigator catches it and performs the tasks to open tiddlers, etc. Short of hacking around it in javascript, I found no built in way to break the message out of the mini stories, so I decided to make the user drag it out!

2. The << and >> icons are neither buttons or drag items, they are small drop areas like the larger regions in the control banner. Try dragging the title of a list to the icon to reorder. Note that you can drag cards to the icons to change them to lists, and drag lists into the card area to change them to cards. These drop areas have been misunderstood by several people, so a future version will likely have a change to a different design. For Dropboard 1.0.0 the User Guide wiki will have much better documentation and examples in the user guide to help people discover how this feature works.

3. The control banner does need another iteration. I'm trying to take advantage of the extra height that is established by the drop areas, keep the options well laid out and visible at thin board widths e.g. in the sidebar, and also avoid resorting to hiding things behind a "More" button. If any ideas that you could draw a napkin sketch of, I'd be interested to see them (Keeping in mind that as an exercise I've decided to only use WikiText, Widgets, and Macros on this project. No javascript).

- Reid

[Mat]

Reid,

In the case of classes on the "p" tags, I'm doing it for CSS Selector efficiency.

I had also heard this so I looked this up some time ago. Several articles and analyses . The conclusion, from the various people investigating it, was that it is not worth the effort in relation to other "efficiency factors". Here is one of the articles;

https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

But who knows, maybe it's different for a TW context. I'd guess the special DOM tree is of particular interest when it comes to evaluating the efficiency of TW because it was, I believe, created by Jeremy. (I barely know what a DOM tree is so I might be talking gibberish here.)

<:-)

[@TiddlyTweeter]

Reid wrote:

Each of the lists on a board is implemented as a "story river" ...

Why is it a "list" rather than a "column?" Its a bit of my over-semantics I guess?

But functionally & visually it looks like "a procession of columns", not primarily a series of lists (even though it is). Certainly from the point of view of someone using this who is not interested in TW internals but more in what it looks like at the surface level "column" has greater merit IMO :-).

Best wishes
Josiah

[@TiddlyTweeter]

Ciao Reid

Small query on layout that differs between the Normal Tiddler view on a widescreen (a) ...

... and what you see if you open it in a Solo Window (b) ...

I'm wondering if this is intentional?

I prefer (b), the Solo Window, even if less flexible on widths for the columns. Its more consistent with a columnised display IMO.

(Tested in Windows in Chrome, Opera and Firefox).

Best wishes
Josiah

[Reid Gould]

Hi Josiah

I only used "list" because that is what is most common with Trello and other kanban tools.

You can get the fixed width in the normal view by setting a value inside the popup that appears when you click the "width" control button. The default used in the window mode is 16.

- Reid

[@TiddlyTweeter]

Ciao Reid

Duh! my bad for not paying more attention. My only excuse is its feature rich & takes a while to grasp all it can do.

Josiah

[Reid Gould]

Dropboard version 1.0.0 has arrived!

See the new post here for an overview of major features. There are some new examples and much more information in the User Guide now, so take a look around.

Regards,

www.ReidGould.com 

(210) 617-0712 

/in/reidgould 

@rd_gld