This application was builded on 2014. I did not know a lot of things, and a Manager asked me to work on a development similar to google tranding cards.

I did not know very well how to work with this, and one of the main reasons was because I did not worked in CSS3 transformations too much.

After the very first release of this application I just keep on working motivated by the reason that I just learn too much on this development. One of my companions at work, looked at me knowing I was in a hurry in order to make this application possible.

The idea is just to give some cards in a grid, and those cards will actually be updated by doing random transitions up - down - left and right.

The Versions

The first approach of this application actually was not made by me, it was solved by using some ideas from the internet and had so many cards that actually make a tilt on my computer :s.

My first approach actually creates and destroy some of the cards, by making a very bad experience and flashes the final user with the white background.

The second approach was with a companion at work with a higher seniority and experience than me in CSS. It was far more smothie. Also we improved the work with the quantity of cards, actually I received thousends of cards, so we have to work a bit on the random in order to avoid the CPU consuption.

The third approach was about just improving the technologies, and the separation of concerns, I also added a bit of continuous integration even though it did not have many tests and just in order to keep on learning, I added travis, coveralls, saucelabs, karma to the project.

You can see the application here here.

You can see the source code here here.


In this case we see a bit more about frameworks. Backbone Marionette and CSS. We worked with Layouts, Collections, Collection Views, Item Views, and CSS3 transitions.


Did you like this post?

Share it in twitter or follow me!