Tinder Message Generator Pt 2
See the final product tindermaker.com
--
I’ve gotten a little farther along on this project. Not much has changed in the UI but a lot has changed behind the scenes. I like to take React as far as I can before switching to redux and this project initially looked simple enough that I wouldn’t need to use it. I was wrong. At least it was turning into a lot of work to avoid using redux.
Pulling in redux was important for a few reasons. One of my problems was updating the profile image anywhere it existed when you change it in the form. Previously it was only updating in the header and and the newest message. How could I handle updating all the old messages with the new profile image? Well I guess I could loop over all over them and update all the messages in state but that’s a lot of work. Instead, just save the image in the store and dispatch an action when it updates. I also moved the messages into the redux store. I needed more control over them than what was easily available in react. Particularly when I delete a message.
I still have a lot of clean up to do with removing unnecessary items from state, but I will go back later and do more clean up. I went ahead and broke the project out further because I was combining too many components in a single file. Easy things like that make big improvements to readability I feel.
I faced some very frustrating problems so far, some of which I’m still working on. One which consumed way too much time was the click handler for deleting events. Since this event is happening on a draggable item in our message list, the click event was being captured by that library. In addition it was also causing the mouse event to fire twice on a click. When I finally looked at the element list in chrome I could see the parent element changing on my mouse click and knew the event was being stolen. I found the handler for this situation in the docs for the drag library and a few minutes later I had no more problems deleting messages from the list.
The other problem which I’m still investigating deals with the final image I want to export. The idea is to take the message container, convert it to a canvas element, then convert that to a base64 image which I can download or send to twitter/imgur/facebook/etc.
The DOM elements are being converted to a canvas element however there are browser inconsistencies which I’m facing. I posted the screen shots below of what things currently look like. Both Firefox and Chrome are better and worse at different aspects of rendering the canvas element.
You can see the anti-aliasing problems with any element with border-radius. Also the 3 colored dots survived without anti-aliasing problems but they lost their spacing. My chevron got a little tweaked, but that’s the least of my worries at this point. The DELETE btns which weren’t styled but they also lost their default styling. Finally, the GIF pseudo button turned into a circle.
My initial impression after seeing the Firefox result was that it was much closer. There is one very noticeable piece that is wrong. The chevron lost all its styles. I made the chevron with pseudo elements and positioned them into a chevron. This could be resolved by either finding an appropriately styled chevron icon or constructing it without psuedo elements. Another obvious one is the delete button losing its styles like Chrome did but again this is not important because it will not be present in the final product. The border-radii didn’t not get jacked up this time however.
Now I’m at a hard place. I have tried two separate libraries for converting DOM elements into a canvas image and both have had problems. The images above were produced with html2canvas library https://github.com/niklasvh/html2canvas/ the other not pictured is https://github.com/tsayen/dom-to-image/
Dom-to-image library had good results. The image needed adjusting because of a bug when the container element is absolutely positioned like my example is. That is something I could solve with different markup however. The other problem I had with that library was it couldn’t get the styles for font-awesome icons. So all the little circles and the wifi signal icons render out as rectangles. I could try another library but it doesn’t seem optimal since I still need to add emojis which will is another wrench.
I’ve gone ahead and gotten an API token for imgur and played around with that for a while, so once I can get the images to render properly I’ll be good on that front. The other sites I’m less concerned about and saving the image locally is an easy implementation.
However I do not feel I can move forward with any more development until I can consistently generate accurate canvas renderings cross browser as that is a critical feature. Savvy users could screen shot on their computers and upload the file but that is obviously not as good as simply clicking a button and getting a usable imgur link.
You can find the repo here: https://github.com/maxehnert/tinder-message-template
Or view it live here: maxehnert.github.io/tinder-message-template
