back to Code

Website – CERISAL

Link: https://cerisal.com

Cerisal is a photo-board site I built with¬†plain PHP (without any frameworks)¬†and a few hours of effort.¬†The inspiration to make something like Cerisal, came from Unsplash¬†and a Facebook page named¬†Beavty. Also, I¬†was frantically looking for an idea to create something with PHP and¬†learn by building something. I wanted to build a site that deals with dynamic data and¬†basic CRUD operations. A photo-board site had exactly what I was looking for. By this time, I’ve already¬†created Securus, so I also wanted to use and¬†evaluate¬†it on a real world project.

The name Cerisal comes from the color Cerise. The domain, cerisal.com was also easily available, which was short and easy to memorize.

Technology Colophon

Here are the ingredients:

Challenges

One particular problem I faced while creating this site, was to minimize the load of the front page on low¬†end devices.¬†So many high resolution images can easily¬†cause¬†serious load time issues. Thankfully, LazyLoadXT¬†proved to be the godsend here and saved the day. Also, creating thumbnails with¬†ImageMagick¬†library saves a lot of bandwidth. Another problem was the grid layout, because laying out so many¬†pictures with¬†diverse set of¬†dimensions was a¬†major headache. After wasting a lot of time¬†configuring Masonry, I still wasn’t happy with the performance and the overall responsiveness on window resize. And because the jQuery solution to this problem was not going so well,¬†I started¬†looking for a CSS-only¬†approach.¬†Without digging too deep, I found Salvattore, which even advertises itself as, “a¬†jQuery Masonry alternative with CSS-driven configuration”. I couldn’t be happier and after closely¬†inspecting¬†Salvattore’s performance, I immediately decided to switch to¬†it.