Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.

The Making of an Animated Favicon

Favicons are actually at their most useful when you’re not active on a tab. Here’s an example:

Imagine you’re backing up photos from your recent summer vacation to a cloud service. While they are uploading, you’ve opened a new tab to gather details about the places you went on vacation to later annotate those photos. One thing led to the other, and now you’re watching Casey Neistat on the seventh tab. But you can’t continue your YouTube marathon without the anxious intervals of checking back on the cloud service page to see if the photos have been uploaded.

It’s this type of situation where we can get creative! What if we could dynamically change the pixels in that favicon and display the upload progress? That’s exactly what we’ll do in this article.

In supported browsers, we can display a loading/progress animation as a favicon with the help of JavaScript, HTML <canvas> and some centuries-old geometry.

While the article primarily deals with a square favicon, the author also provides code for a circular favicon as well.

Site Monetization with Coil

I’ve tried a handful of websites based on “tip with micropayments” in the past. They come and go. That’s fine. From a publisher perspective, it’s low-commitment. I’ve never earned a ton, but it was typically enough to be worth it.

Now Bruce has me trying Coil. It’s compelling to me for a couple reasons:

  • The goal is to make it based on an actual web standard(!)
  • Coil is nicely designed. It’s the service that readers actually subscribe to and a browser extension (for Chrome and Firefox) that pays publishers.
  • The money ends up in a Stronghold account1. I don’t know much about those, but it was easy enough to set up and is also nicely designed.
  • Everything is anonymous. I don’t have access to, know anything about, or store anything from the users who end up supporting the site with these micropayments.
  • Even though everyone is anonymous, I can still do things for the supporters, like not show ads.