textFAKE

tf_screentf_screen1tf_screen2

Usually when my family is asleep and I am not being pressed with homework, I will work on one of my ongoing projects. But sometimes I just need to try something new. One of these nights led me to start putting together textFAKE.

I am not sure why, but something made me question all those funny text screenshots floating around social media. I figured someone made a way to generate these messages and after Googling it, I found several. I played with each to generate a message and the UI on each was very poor. You had to fill out a form and then generate the screenshot. Not very modern.

So, I set out to make my own version that you could edit directly in the screen. This challenged my CSS skills and the bubbles let me play with the border-image property I had wanted to play with. Getting the gradient behind the blue bubbles was a fun challenge, but persistence paid off. I also wanted to play with the jQuery UI sortable list functionality, so I made the bubbles moveable/droppable for reordering.

The last thing this experiment will let me learn is Phantom.js. To generate an image from the editable HTML is not the easiest thing. Especially since variances in browser support of my CSS could give people weird and unusable results. I will use PhatomJS to generate a screenshot of the rendered HTML from my server with a headless WebKit browser so the results will be consistent.

Now to find more free time to finish this!

Leave a Reply

Your email address will not be published. Required fields are marked *