v0.7.1: Voters Widget Expand/Collapse Animation

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

Just added an expand/collapse animation to the voters widget body.

To accomplish this a CSS transition on the max-height property was used.
I’ve had to make some changes to the Body component to wait for the end of this transition before loading the visible avatars, to have the container viewport reached its final hight.

Notice how the vertical scrollbar track is now always present even when it would not be needed. This is to prevent visual glitches for few-votes widgets where the scrolling is it not needed.

Another point to note is how the max-height transition to 50vh causes a too fast expansion on low-votes widgets, typically when there is only a row of avatars.

Additionally, it was added a zoom transition when hovering on the avatars(the images are very tiny though, 30px, so the zoomed version is a bit blurry) and now the voter profile page opens in a new tab.

v0.7: Card Voters

rt-0.7-sshot-00

rt-0.7-sshot-01

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

Another addiction for the card page sidebar. Now, if the card has votes, the entire list of voters can be consulted.

Two forms of lazy/on-demand data fetching was employed.

First, voters data is not fetched until the widget is expanded(the number of votes comes down with the other card data).

Second, for the avatar images. Some cards can have a massive number of voters(see links below) so this would mean asking the browser to throttle the loading of hundres of (tiny) images, even if they will not never be watched by the user because they are beyond the fold of the widget.
So avatar images are only requested when they ‘enter’ in the widget vieport during scrolling.

This feature is implemented in the Body component, a subcomponent of the Voters component that handles the rendering of the voters. The core of the code is in the uncover() method, invoked when the voters are displayed the first time and then on every container scroll (debounced)event, where unloaded avatars vertical positions are compared with the new y coordinate of the bottom of the viewport.
This uncovering process is performed even on the window resize event simply because the widget body has a CSS max-height specified with viewport coordinates(vh).

The widget header layout is implemented with Flexbox.

Here are some testing cards:

v0.6: Timeago

rt-0.6-sshot-00

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

This time a client-side timeago feature has been added to the card comments creation time to show a human friendly phrase expressing the time passed from the comment publication.
These phrases periodically update themselves while the page is open.

The previously created Timestamp React component was updated to handle this new format.
Note that this component doesn’t update itself because that would mean that on certain cards with hundreds of comments(when they are loaded with the pagination) there would be too many JavaScript timers running(all doing the same thing, querying the current timestamp with the Date object).
So the live update is handled by a single timer setup by the parent component CommentList that keeps its ‘age’ in its state and periodically pass it down to the Comment components and finally to the timestamp component using its format prop.
So this component has only the responsability to generate the appropriate markup:

<time class="timestamp" datetime="2015-08-27T13:19:27.000Z" title="Thursday, August 27th 2015, 3:19:27 pm">9 days ago</time>

To format the timestamp in these several forms it is used the Moment.js library.

The component is reused in the Card component to display the latest activity time of the card.

v0.5: Card Comments Pagination

rt-0.5-sshot-00

rt-0.5-sshot-01

rt-0.5-sshot-02

rt-0.5-sshot-03

rt-0.5-sshot-04

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

As can be watched in the above screen shots, pagination of the card comments was the focus of this iteration.

After the last comment(if the card has no comments the comments section is not displayed), if there are others comments to read, a ‘more’ button is displayed. When the user clicks on this button, it displays an activity indicator and when the next page data is loaded the new comments are appended to the ones already on page.
In the comments bar there are displayed the number of shown comments and the total of them.

Implementation Notes

The first page of comments comes down with the other card data. Successive pages are fetched when the more button is clicked via Trello API calls wrapped in a ‘promisified’ page iteration object(it has a .next() method but it is not an ES6 iterator object) provided by the data module.

This iterator is created in the Comments component getInitialState() method:

this.pageIterator = data.cardCommentPageIterator(this.props.cardId, this.props.pageSize, 2);

and it is then used to fetch successive pages:

this.pageIterator.next()
         .then(
            page => {
               this.setState({
                  items: this.state.items.concat(page),
                  loading: false
               });
            },
            (reason) => {
               console.log('cannot load comment page', reason);
               //throw reason
            }
         )
      ;

v0.4: Card Page

tr-0.4.01

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

In this iteration it is possible to inspect the details of a card.

Differently from the original Trello design that uses a popup modal to display the card data, I opted for a separate and dedicated fullscreen page, with a design inspired to the Dribbble shot template page.

tr-0.4-00

This is just a first basic version, so some features are missing and the CSS styling is uncomplete.

The layout is organized on two columns, with the main content and the comments on the left and some card auxiliar info and actions in the right column.

I chose to put the card cover image, if any, just under the card title and meta. After this image, it comes the card description and the comments section

In the right column/sidebar there are the number of card votes, the number of attachments and two links to get back to the parent board and to see the original Trello card.

The layout is not responsive yet.

The only card activities retrieved with the Trello API are the comments, and only the first 50 items are showed.
Pagination is coming in 0.4.1.

And other card page upcoming features in 0.4.x will be timeago, attachmnts data, voters, …

Development Notes

At the moment, returning back to the parent board makes the app spawns a new http request to Trello to fetch again the board data. This will be fixed later.

The card description and the comment text can be formatted by the user with Markdown, so the Comment React component, in its .render() method, convert it to a HTML string with Marked and inject it into the DOM with dangerouslySetInnerHTML. Later this could be done with Marked-React.

tr-0.4-02

v0.3: Architecture

Demo

In this development iteration I finished the journey started in the previous version in search of an app structure.
How mentioned in the precedent post, I first tried the Flux architectural pattern proposed by Facebook. I enjoyed it but I found it a bit overkill at this development stage. The funny thing is that at the end of this journey I returned to the starting point, that is the React Router.

However along the way some new features were added.

Now the app has three pages, the home, the about and the board pages. They are all rendered on the client, the server just serves the initial html file.

The home page now shows only a (Flexbox)grid of some public Trello boards, grouped by category.
The grid items have an entrance animation implemented with delayed CSS Animations.
Keyboard navigation(arrows, tabs, enter…) is supported.

trello react

Selecting a board item switch the app to the board page view.

pub-board-calculus

Finally, on the about page I moved the informations previously displayed in the Welcome section of the home page.

about

Note that now, thanks to React Router, the browser history buttons works as expected, and the app urls can be bookmarked. If an not existent url is provided a basic not-found-page is rendered instead. Urls have a nice(not hash symbol) format because they are handled with React Router History.Location.

board-not-found

notfoundpage

The app is developed on Chrome and some basic testing has beeen done on latest Firefox.

Implementation notes

Now the app features a basic backend, with a simple Express.js server hosted on OpenShift, that for now just serves the SPA index.html file for all non-static assets urls(images,css,js).

I’ve switched back to Sass from PostCSS. The only PostCSS plugin used in the build script is AutoPrefixer.

Talking about responsive web design, the app target devices are laptops and desktops mainly, but some media queries here and there adapt the layout at smaller viewport sizes.

v0.2: In search of an architecture

sshot-02

Now there is a welcome screen/page where it is possible to load some public boards.

But the main aim of this iteration was to introduce some application architecture on top of the React components.

In particular I made some experiments with app states and routing, using some great libraries like React Router, Router.js and Page.js. So now the url showed in the browser location bar is different form the one showed in a board page, with support of the browser history navigation buttons.

However, this will change in 0.3, where I’m trying the Flux architecture.

sshot-01

React Trello 0.1: Hello World!

Demo

sshot-00

In this first iteration the app just fetches and displays the data from an hardcoded (public)bord id, the ‘Trello Development’ board.

The full card view is not implemented yet, clicking on a card opens a new tab with the card page displayed by Trello.

No editing is allowed on the board.

Tested on Google Chrome 44. Don’t work on IE.

Implementation Notes

JavaScript

Trello provides a Js wrapper for its API but at the moment I have not used it yet, to make some practice with the raw API. The trelloAPI object implements its loadBoard() method with the Fetch API.

The main ES6 features used are the Promises returned by the trelloAPI object asynchronous methods and the Arrow functions, used in some promise handlers and to bind some callbacks in React components methods.

Design

It’s a almost a copy of original trello layout, but more visual weight is given to the card titles.

In this early phase I adopted a neutral grayscale color scheme.

The code to load and display the board background image is implemented but currently disabled to avoid visual distractions.

Temporary icons are from the Genericons package.

CSS

Flexbox was used in several places to laydown the UI layout.

SVG

SVG is used to implement the icon system, with the inline sprite techinque. No ajax loading.

Build

The build process is under development.

Currently Browserify with the Reactify transform is used to transpile JSX and ES6 features and to concat all the modules in bundle.js

CSS is (post)processed with PostCSS and its plugins.

A custom Node.js script somewhat glues all together.

What’s Next

More or less, in approximate order:

  • Simple homemade routing
  • Loading of a board provided by the User
  • Routing with React Router