Personal Gifs as a Service

I realized that generating random gifs, while wildly amusing, is not very
personal. I also love using emojis 😅 but find them also to not be very
personal. I wanted a way to communicate to my coworkers and friends, but also I
wanted them to be able to see my ridiculously good-looking face 😝

The result: "darren gifs as a service"

Now I can call upon the internet (like zeus calling for lightening ⚡️) at any given moment to render a personalized, hand-crafted gif.

Here's a view into what it looks like when invoking the alfred function in slack:

Creating your own gif service

1. Create Your Gifs
2. Upload it to a publicly accessible location e.g. GitHub
3. Add a Netlify redirect to a Netlify site
4. Invoke the url from anywhere

Create Your Gifs

Gifs can be created with a few services these days. The key is to optimize them so they're not too big. I use Giphy Cam which allows me to easily take gif selfies and add little effects to make them
more fun like text or sparkles.

I then tried to find a service that optimizes them. I found gifsicle which optimizes gifs for space. My face is nice, but does it really need to be 10MB?

yarn install gifsicle
yarn gifsicle --batch --optimize=200 --colors 256 <gif>.gif

Upload the Gifs to a Publicly Accessible Location

I upload all my gifs to a GitHub repo. The optimization in the previous step is important here so that you don't store too much... You can easily store these in any CDN such as cloudinary or S3. The key here is that you want to be able to remember the name of your gifs so name them short and sweet like "yw.gif" for "you're welcome" or "no.gif", "yes.gif".

Keep the gif url of your publicly accessible gifs handy. You will need it in your next step.

https://raw.githubusercontent.com/darrenjennings/darren-gifs/master/gifs/

Add a Netlify Redirect to a Netlify Site

Redirects in netlify are dead simple (and free). If you have an existing domain or Netlify site (did I mention they're free?) then you can add a redirect file in the root of the deployed site. Grab your gif
url and put it as the target of your redirect:

dist/_redirects

https://guuu.io/gifs/:name  https://raw.githubusercontent.com/darrenjennings/darren-gifs/master/gifs/:name.gif  301

Now I can access a gif on GitHub via a netlify redirect:

https://guuu.io/gifs/yay

becomes:

https://raw.githubusercontent.com/darrenjennings/darren-gifs/master/gifs/yay.gif

Note:
If your site has a build process, you will need to make sure that the _redirects file is in the same directory as your built site, e.g. /dist

Here's the file on my site for reference:
guuu.io/_redirects

Invoke the URL

I am a big fan of Alfred after watching
John Lindquist stream about Alfred workflows. I added a small workflow that allows me to type d <gif_name> into my search bar which will paste the url wherever my computer cursor is. This allows me to react very quickly like the giphy slackbot but it works in any venue (Discord, Slack, Messages, Texting, etc.). Most everyone has access to the internet so it works well this way to host my own gifs and the previews even follow the redirects correctly. I also append a timestamp as a query param because sometimes slack won't unfurl a link that it's seen before, but I want to spam my coworkers with my gif even if they've seen it.

I also find that my domain is short enough that I can easily type it out letter by letter, so even if I don't have an Alfred workflow I can usually call upon the links from memory. https://guuu.io/gifs/beautiful

Check out my GitHub repo to see the source, and all my gifs and a copy of the alfred workflow

• https://github.com/darrenjennings/darren-gifs
• Tweet this article