Experiment: Rethink/Refactor the Feed Posts

[worldviewer]

The swipe matrix is creating unnecessary complexity for both the UI and the codebase. The fact that swiping can happen both up/down and left/right would seem to add unwanted complexity to the UI and could actually undermine my attempt to teach epistemology with these swipes.

Also, when a person is dropped into the swipe matrix for a controversy card, there is no particular feed post selected. This means that there will always be an empty feed post pane until a feed post is selected from the feeds list.

I've grown to dislike the term feed post, as I don't think this term is self-explanatory for users. I should avoid using it -- even if I continue to deploy the concept in my codebase.

Another confusing aspect of the current UI is that swiping down from the controversy card takes the user to the feed post list. This is hardly intuitive because there is also a feed post list for the worldview level.

What would require no explanation is if the feeds list, the feed post and comments were simply all rolled into comments. I should try to identify a mobile UI interface which can support all three on the same page. This would eliminate left-right swiping -- which would re-focus the user on the up/down swipes which they are to learn epistemology from.

And there is yet another problem here insofar as users may be confused about where to post -- which is the exact problem I am trying to solve. What we want is the feed posts to act as an infrastructure for binning information and eliciting commentary.

[worldviewer]

The feed post list can be represented as just a MobiScroll Multiline Select.

[worldviewer]

Content should emulate Instagram's vertical feed, but this needs to happen horizontally. I should split the screen into a 5 row x 3 column grid.

Perhaps the feed should have a random aspect to it, while the list would always display in the same order (?).

There would be several different post formats:

1. 5 x 3 (xlarge-caption) - both large image and long title
2. 3 x 3 (large-image) - just large image
3. 3 x 2 (large-caption) - 2 x 2 image on top of 1 x 2 caption
4. 1 x 3 (medium-caption) - image to left or right of long title
5. 2 x 2 (medium-image) - large image, no text
6. 2 x 1 (small-caption) - very small image on top of short title
7. 1 x 1 (small-image) - just very small image

[worldviewer]

Here is a package to grab an image's color palette, which could be useful for selecting colors to use for text boxes.

This package could give me a way to extend image background colors into any direction. If it was combined with a tool to rotate images like this one or this really simple one, then I could identify left and right image edge colors as well.

Alternatively, I could just use this package, which would let me also check whether or not a side has the same color running all the way down it. In combination with the 2nd, it could handle all of my needs.

[worldviewer]

I think I should perform a series of experiments which, if successful, would build into the feed I am imagining:

• [x] First, an experiment to see if I can identify which sides of feed post images have a single contiguous color -- and what that color is.

• [ ] Given result of (1), next create the non-square image/text pairings for 5 x 3 (xlarge-caption format, just top or bottom), 3 x 2 (large-caption format, just top or bottom), 1 x 3 (medium-caption format, just left or right) and 2 x 1 tiles (small-caption format, any side). How much of a title can I fit into a tile? What are my options for display?

• [ ] Now, given results of (2), can we assemble together a complete 5 x 3 grid from feed posts?

• [ ] An issue that I have with the controversy cards is that the screen dimensions do not always correspond to the card dimensions. There is, e.g., extra padding on the top and bottom of the controversy cards on the iPhone 5. What I'd really like to be able to do is to use a single background image tile behind the controversy card to seamlessly extend in all directions the controversy card edges. So, this fourth experiment would be to create a view of the controversy card fills out the card edges in all directions for any size device (even tablet).

[worldviewer]

[worldviewer]

To make this work, we need to have a small image format which is set to a width/height that would allow it to display clearly at full width on a mobile device (640 px).

Also, the /feeds endpoint should return article titles, so that decisions can be made on-the-fly about how to assemble together the feed grid.

I could refactor the thumbnails script to generate the new thumbnails.

[worldviewer]

Those adjustments are now implemented, so the data is now in place to begin experimentation.

[worldviewer]

First experiment is successful, but it lacks any sort of fuzzy matching capability. So, this would likely not work for photographs.

[worldviewer]

Feed Generator Algorithm

The first step is to generate a set of options for captioning an image. The logic should go like this:

1. How long is the title text? We need a way to identify if the text is going to fit into each possible caption option;

2. Now, combine that information with the image caption options;

3. What if we permit ellipses for titles, and what if we allow captions to just have black backgrounds? These must necessarily add to the total number of options (even though they should not be the first).

4. Now, the final step: given the total set of feed posts, where a set of caption options has been specified for each one, we should randomly select a grid format and populate it from a randomized list of the total feed posts for that specific controversy card.

[worldviewer]

I am wondering if it makes sense to use an existing project as my starting point, so that I can get past the basics of setting up a responsive grid. It's not really a perfect match for my needs because it's operating by rows, whereas the look I'd like to go for has more of a Tetris feel to it.

[worldviewer]

I am wondering if it makes more sense to start from each of the grid examples and work my way backwards to the css and markup which would be required to generate each of these grids. By going through a few of those examples, perhaps I can start to see the patterns for how to do this.

[worldviewer]

There is a traditional responsive solution to creating a photo grid here and here.

There's a flexbox version of a photo grid here.

This guy doesn't think grid frameworks are necessary. Here's another DIY flexbox grid page.

The Flex Row CSS Grid System looks very promising.

Gridlex has an example which is remarkably like what I need. I should study how they did it.

There is a note here about using Gridlex with React.

Flexbox Grid is supposed to be very similar to Gridlex.

I don't expect that I would ever need to be able to drag tiles around, but just in case:

https://strml.github.io/react-grid-layout/examples/0-showcase.html

[worldviewer]

Gridlex is looking like what I need to use. My preferred gutter value is apparently 2px.

[worldviewer]

Currently thinking that I am going to have to learn React Native in order to implement the mobile version of the app, so everything that is related to mobile is for now being pulled from In Progress.