Gifntext - An Update
Jeffkillian.com initially started as a Geocities website when I was in 6th grade. Over the years, it has slowly evolved into a place where I can practice and become familiar with web development as it progresses. I started out coding with Microsoft Frontpage, then moved to Dreamweaver. Initially, there was very little coding, and it was all WYSIWYG. However, as I learned more, I could make it more interactive.


I incorporate drawings and blog posts to keep those that are interested updated. Through the evolution of the website, I was forced to learn HTML, PHP, CSS, XML, jQuery, javascript, and the handling of MySQL Databases. I've put online some code samples.
Gifntext - An Update
The majority of my time away from work has been working on gifntext, which is a website that allows you to add images or text over a gif. I was tired of seeing a bunch of cool gifs online without having any way to make them. Some of my favorite gifs (which I now know to be called animal text gifs, involve dubbing text over animals:
cat ballet gif

cat ballet gif

cat ballet gif

I had started to keep a perosnal repository of gifs that would be fun to dub over. However, I realized there was no easy way to add the captions to a gif. Because of my work with dangeraffe, I was pretty familiar with html canvases. Also, there was a point in dangeraffe where I had experimented with a recording feature so that you could record your craziest moments. Because of this, I had a solid base working with canvases. I decided I'd try to make an online gif editor, and see what would happen.

It started out with me just googling different gif libraries, trying to see what already existed. One requirement was that I wanted it (at least initally), to be all client side, so I wanted to try to do it with javascript whenever possible (this ended up happening, although some of the gif saving is saved to a file for memory purposes). I found a bunch of useful resources regarding how to turn gifs to a canvas. After a bunch of trial and error, I had a basic website set up where you could add text to a gif, and gifntext was born.

I posted about it on reddit, hoping to get some feedback, and got many positive responses, as well as ways that I could improve the website. I took all of the feedback, and developed the site for about three months. This was such a long process because I could only work on it in the off hours. On top of that I had to balance it with playing with my dog:
With the addition of the new requests, I realized the website was gaining popularity when I kept getting emails saying that generation of longer gifs wasn't working. I used excel and some javascript output to create the chart you see to the right. To understand this chart, you just need to know two things. First, gifs are just long strings of characters. Second for the gif generation, I go frame by frame, convert the image to the proper string of text, and then add that text to a long string, which we eventually spit back out as the gif file. What I found was that the later frames took much longer than the earlier frames. Because each frame is relatively the same size (width/height), it is not due to generlly having more data on these frames. Rather, it is because the string that represents the gif is being held in memory, and it is getting bigger and bigger. When I say big, I mean 7,000,000 characters big. When I initially developed it, I was only testing on smaller gifs, and just wanted a proof of concept. Once it was done, I figured I'd fine tune the performance aspects. The result of this is that, each time we added a new frame, we were going over every character in this long string. Because this is all happening client side, the client eventually runs out of memory. Once i realized this, I did some reorganization of code, and was able to completely eliminate the overhead of keeping that string in memory, as the frames are now saved off to a file on the server each time a frame is added.

This was the biggest problem that the website was facing. Once this was solved, most scalability concerns were handled, and I was able to sit back and see if the site was useful. From what I can tell, gifntext really is the easiest way to add text or images over a gif that I could find online. I'm now trying to learn more about search engine optimization, so that the website appears more frequently for appropriate searches. Using a simple SQL query, I grouped the number of uploads by day, and graphed that over time.

You can see that the number of uploads really started to take off around September 3rd. This is all with minimal advertisement. If I added a watermark to each gif, I could greatly increase the visibility of the site, as every gif would essentially be a link back to my site. However, I've chosen thus far to not implement a watermark, as I think it somewhat ruins the gifs to have dozens of watermarks all over from different websites. Hopefully the users are nice enough that they'll link back to the site, and word of mouth will be enough.
Write a comment...
Want more? Check the blog archives
Untitled Document