To Crop or Not to Crop (my Emojis)

I came across a use case for the BigMoji generator where a user didn't have a square image and this was causing the emoji to have blank space in the center. Which is less than ideal for the emoji to legible when you sput it across multiple lines!

I hadn't touched the code for a while but thought it was a perfect time to add some new year ✨ sparkles!

I decided instead of presenting all the options I'd like to guide the user through creating this, so I split out each step into it's own section using CSS and JavaScript to move through it. It's not as seamless as I'd like but the CropperJS library had some issues rendering the image full size. I think I can fix that by rendering the image outside of the library process but I didn't have time to debug this in the spare time I had for this project.

I also included some basic analytics to see the usage of the website - it'll be nice to see if it ever used!

Honestly I had a blast coming back to this and being able to fix a real use case and add some more interactivity.

If I get any spare time to experiment with projects I'd love to resolve that image issue so I can make the animation cleaner, and potentially build the cropping into the grid feature - how can I make it more interactive?

All things to think about for next time!