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


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


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.

v0.4: Card Page


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


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.