While editing How to Survive a CMS Migration, my editor Alison Buki recommended some phrases should link to GIFs. The approach added necessary emphasis, but felt that said implementation interrupted the reader’s flow, creating a flawed user experience. After research and exploration, I determined that the best approach was a tooltip method. The self-imposed restriction that my portfolio have zero dependencies created hurdles with the implementation. For this approach to work, I would have to make my own GIF-based tooltip library, one that people could share and distribute easily.
The Goals
This library should stand alone, meaning zero dependencies required, including jQuery. The library should be HTML tag independent, as to allow for any application. It, the library, should be user friendly and easily customizable through any web-developer method. Finally, the tooltip should emphasize the content.
The Process
Design
The design required the tooltip to have complete customization opportunities. I understood the basic design going into this project having previously worked with tooltips. At the minimum, tooltip styles should flatter the content, not distract from it. I chose a simple, recognizable shape and used a standard black (#000) as the default background color. This design approach enabled the user to easily imagine their design integrated with the tooltip.
As for the animations, I kept them simple. A fade in/fade out approach eases the introduction and removal of the tooltip. The upwards float immediately shows which word or phrase attached to the tooltip, removing any possible confusion. The user expects that upon dismissal, the tooltip exits similar to an entrance, but in reverse.
2. Development
Developing this library was the hardest part of the process. Initially, I built out a functional CodePen with the Giphy API to visualize how the tooltip functionality. Making the API search query dynamic was the next step. I expanded my CodePen to include a text input, testing how the API and tooltip interact with live text. After working out some kinks, I moved on to creating my first library that would become Gifify.
I googled library creation best practices for hours, only finding a diversity of answers. My goals and CodePen code demo provided a simple starting point. After reading a few articles and watching some tutorials, I decided on Binary Intellect’s method of library creation.
I heavily depended on Github for this project, uploading every time something new worked. I wanted a completely versatile library, so methods like “getElementById()” and “getElementByTagName()” were out of the question. I landed on the “querySelectorAll” plus a for loop combination. This outcome, plus the wrapper function found in Binary Intellect’s tutorial led to an implementation method that resembles that of jQuery, which increased familiarity.
The Hurdles
The prototype method in the JavaScript language proved to be the most difficult hurdle. Though I’d seen it everywhere, I’d never used JavaScript prototyping in my own work. While the syntax was new, the format made some sense due to my dabbling in Object Oriented JavaScript on CodePen. I also found converting OOP to the prototype method more difficult than I originally expected due to the nature of scoping with JavaScript Object Prototype.
The Outcome
It’s pretty cool.