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.


React Cubic Bezier

React Cubic Bezier

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.

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.