Scott's Portfolio

Github Profile LinkedIn Profile Go home

Where is Kangabru? Mistakes and Challenges

Back to original article here

Expanding Images (Try it out here)

Embarking on a personal project is always exciting, and for this project I was eager to show off my chops and create a slick, modern webpage. Naturally ‘animations’ came to mind. I discovered a fantastic image gallery concept and decided to use it.

The code is right there, it shouldn't be too hard right?
- Excitable me

The process

Converting the animation example started off well:

What I failed to account for was future enhancements. Naturally I wanted some image gallery nav controls shortly after. Some problems:

Whoops, I did the conversion wrong! The original concept used a floating ‘image preview’ element and animated that to specific images. Had I intended to have those features beforehand, I would have questioned my original algorithm. I was blindsided by the excitement of building something.

With some more work I got the animation working, but it took longer than expected.

Lessons Learnt:

Image Navigation (Try it out here)

Once the animation was complete, I wanted image navigation controls. Initially the actions were: next, previous, and close. Simple right? I created the UI, wrote the code, hooked it all up to the animation component. Easy enough.

Then I wanted a seamless transition when the thumbnail switched to the full image. Next I wanted swipe between photos on mobile. Of course I need to let users zoom into the image too. Later I wanted an image gallery slider so users could navigate the album easier.

My ideal image viewer became more and more complicated. There are so many lightweight, feature rich components out there that I should have used one of them. Again I could have saved a lot of time, but this is how you learn.

Lessons Learnt:

Masonry Grid (Try it out here)

I wanted a classic masonry grid to showcase my albums and images. The popular library Masonry was of course my first choice.

The problem started when trying to retrofit the library into my React app. Duck tape solutions exist to combine the two libraries, but I’ve never been able to get it working quite perfectly. The following issues in my Masonry implementation still exist:

Whilst the library initially looked promising, it’s been frustrating trying to fix the interoperability issues. In future, I might implement a more react specific solution.

Lessons Learnt:

Back to original article here