Proto Tool

Some time ago, after having played a bit with Balsamiq I wanted to try to implement with React and Flux the basics of a simple editing tool and so this project was born.

Unfortunately, at some point I had no more enough time to continue, but it was very interesting, allowing me to mix some cool things like
react, flux, svg(the design objects are rendered with SVG) and other topics.

There’s no demo because I had to stop the development in the middle of the implementation of some critical features(proper scaling of multiple selected objects) but the source is on github.

A Pinterest-like Blog Home Layout

pinterest-like-blog-home-layout-sshot-00

Demo(If the page loads slowly just reload it, the server could be idle for low traffic)

This is the first iteration of a project I started after having discovered the BLOGThESIGN site.

So, ideally this would be a template for a blog home page, with a fixed-on-viewport ‘cover’ with some site info on the left and the main content on the right consisting of an irregular grid of post teasers, arranged in a Pinterest/masonry-like layout. The whole viewport width is partitioned in equal sized columns, where the first column is for the cover and the remaining ones are for the posts.

These post teasers are rendered with a custom (vanilla)Javascript code that loops through them and set their css absolute position according to the target column width, their height and the available container width. This is what I mentioned at the end of the description of the Pinterest Layout demo .

Initially this computation is delayed after all the posst images are loaded, to get the final height of each post. During this phase the masonry layout is approximated with Flexbox, obtaining the same effect/behaviour along the horizontal axis but with post arranged in same-height rows, as can be seen in the first shot:

Pinterest like blog home layout-sshot-01

Pinterest like blog home layout-sshot-02

Note that there are a lots of posts on page to test the performance of the custom layout code. One of the next items on the TODO list is to implement an infinite scrolling solution.

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.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.