Build a JS Previewer for Dribbble GIFs
Useful tool to check the preview of GIF before publishing
Hi fellow designers!
I think most of you use Dribbble as a platform for showing own portfolio. And in a race for gaining more likes all the details matter, especially the right look of your shots in feed. And I’m going to share with you my story of a struggle for quality which eventually lead me to create my own Previewer tool. The tool that allows me to check how my GIF shot will appear in feed.
Gaining annoy
I had an idea of creating such a tool capable to make a right preview of the animated GIF shot before publishing on Dribbble for a long time, probably since I have uploaded my first animated shot. By nature, when I see a room for improvement, I can’t just pass by. And this time the rooms were:
1. It’s not a secret that Dribbble uses the 0th frame of animated GIF file as a preview image and sometimes it’ll surprise you because you’ll see it right after the publishing. It’s quite strange, isn’t it?
So, many designers don’t see what will appear as a preview of GIF shot and very often miss out to check 0th frame manually and as a result — they publish GIF shots which aren’t good looking in feed:
2. For the first time, I rendered and assembled GIF shots, I have used default Finder preview to control visual results. And very soon I understood that it’s not the reliable tool, especially in case of preview shots with a gradient. Or in a quite common case when the GIF’s size of your dream goes beyond 8 Mb and you should to twiddle and tweak every possible setting in Photoshop in order to reduce it, while controlling visual result to keep a minimal loss of quality. But Finder minimizes the GIF file on a preview in a very ugly way, especially with the granients and GIF dither less then 100% .
3. In the excitement of designing a shot, it’s quite easy to forget something, for instance, forget to loop the GIF file. And again Finder preview isn’t a durable tool to check that. Because it plays all GIFs in an endless loop, no matter if GIF looped indeed or not. No wonder, that it is very easy to miss out this moment. I overlooked a couple of times to loop a shot and I had to reload it after publishing.
And the need for such a previewing tool was becoming more and more obviously for me. Finally, on New Year’s holidays, I had some free time from projects and I decided to put the idea into action. Frankly, I didn’t want to mess around with the server, and at the same time I want to practice my CSS and JS skills, so I determined to make a single HTML file where all the magic will be entrusted to the JavaScript on the client side.
Clarifying vision
I started, as a UX designer should, with a brief collection of requirements of user’s needs at the given moment. And after I had figured out those, I split interface into two states:
State 1 — Screen with a file selection;
User can select only a GIF type of file on his local drive.
State 2 — Screen that shows the results;
It should appear pair of preview-and-source images. In three sizes — 0.5x (200x150px), 1x (400x300px), and 2x (800x600px). And here user should have the ability to pick another file to preview without page reloading.
Designer’s journey through JS world
Having determined the requirements, I proceeded to the HTML page markup. First of all, I had done a draft <div> page, then set up the CSS styles like on Dribbble page. It’s a trivial part of work in general, except the applying styles to <input type=”file”> element. It’s not capable to apply any styles directly to itself and looks pretty ugly in all browsers by default. But exist a tricky way to handle it — real input hides and a button with the right style inherits it. And also by CSS, I did switching between page states: browsing and results appearing. The time had come to do some magic with JavaScript.
I thought that the JS library to parsing frames from GIF images isn’t a wonder and I started with the search for a suitable one. I found the right one on GitHub — gifFrames.
Within a couple of hours, I set up the library to my page, and tested it by extracting the 0th frame from the random GIF file from giphy.com. Worked!
I was about opening a champagne, but a moment later in an attempt to do the same with local files, I realized that it’s out of my hands at the given moment and I stuck. There were two problems:
- The library worked fine with the files by the url, but how to deliver a local file to it?
- And on the other hand — how to display the original GIF file? The <input type=”file”> hides a path to a real file on user’s local drive for security reason.
If you are a Middle-Senior JS developer, then these problems might seem silly to you, but for me, as I am a designer they were quite unexpected.
I had started to search for a solution and day after I dug out the one for both issues — Base64. For those who, like me, heard about Base64 only superficially in the conversations of fellow developers and didn’t pay much attention to it — here is the depiction.
The solution are: GIF file must be converted to the Base64 format and as a variable transfer to JS parsing function; and to show the original animation, the same Base64 converted file should be transferred to appropriate <img> tag like a value of url. Bingo!
Eventually, I spent a little bit more than just a couple of days as I was expected. But I’m glad that I have learned new things that definitely will come in handy for future projects and also I have tested my ability to solve non-standard and unexpected issues.
Using Previewer for Dribbble shot
After all I was satisfied, I got what I wanted — a Previewer tool that shows what image will appears as a preview of GIF image. And now it’s extremely helpful for me in preparing GIF shots for Dribbble, I could see clearly how my shot will look in feed.
To use it follow this simple steps:
- Download the Previewer(a single HTML file) — from Dropbox or from Dribbble.
- Unzip and launch it, it’ll open in your browser. I have checked workability in such browsers as— Chrome, FireFox, and Safari.
- Click browse and pick the GIF file of shot you want to preview, according to Dribbble rules it should be 800x600px. Also Internet connection is required because under the hood this tool needs access to the libraries — gifFrames and filetoBase64.
- Enjoi the results. But keep in mind, it’ll take some time to parse the file and the more file size the more time it’ll take. At my tests the results were — from 1.5s with 0.5 Mb file up to 8s with 6 Mb file. But in average my results are between 1s to 3s.
I hope it’ll be helpful for you too and I would love to hear feedback and comments. Have nice projects and cool shots!
You could reach me on Dribbble
