React Cubic Bezier

React Cubic Bezier
Demo

This is an in-progress React tool for CSS animation timing functions(easing) based on cubic beziers, inspired by great tools like cubic beziers.com and easings.net.
At the moment the curves can only be compared and not edited.

Advertisements

A Color style guide in React

React Live Color Guide

Demo&Code

This is a live styleguide for colors implemented with React.js.

Colors, specified in hex, rgb or hsl, are read from a JSON file and then displayed arranged in a responsive (Flexbox) grid of color swatches.
Each swatch is rendererd as a card with a sample of the color and then a list of its css color formats(hex, rgb, hsl), auto computed with Tinycolor.
Each color code can be copied to the clipboard with just a click thanks to Clipboard.js .
A Css animation is used to notify the user when the color has been copied to the clipboard.

Issues: on Firefox 40.0.2 copy-to-clipboard doesn’t work and on IE 10 there are some rendering problems. I’m not going to check these bugs now, this was just a quick exercise.

React Cal: a hierarchical calendar

React Calendar

Demo&Code

A break from React Trello. Well, not really, because probably I’ll reuse this code to implement a calendar to view cards with due dates for that project.

Indeed, this is a React component to render a calendar to browse registered events(or more generally, every kind of information with an assigned date).

The calendar can be browsed in a hierarchical way, following its year-month-day tree-like structure:

calendar-hier-nav

So when in the month view the user can see the days of the month, with the relative events if any, and the navigation options are:

  • Previous month: navigation bar(navbar) left arrow
  • Next month: navbar right arrow
  • Go up to the year view: navbar up arrow. So, if we are on the october 2015 month page, clicking this button takes us to the 2015 year page
  • Go to a day view: click on a day cell to do down to the relative day view

In the day view there are the events of that day, if any and user can navigate to the sibling days or climbs up to the relative month.

The year view is unfinished, so at the moment it just displays the month labels. Once again, the navigation is hierarchical, so it is possible to watch previous and next months or go down to a month view.

Additionally in the navbar is present a Today button that teleports the user to the current day, month or year, depending on the view level.

No external date libraries have been used, just the native Date object.

Flexbox is used in several parts, like in the rendering of the day cells of the month view.

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