# 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
- Create Your Gifs
- Upload it to a publicly accessible location e.g. GitHub
- Add a Netlify redirect to a Netlify site
- 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
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.
# 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:
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:
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