FLIP is an approach to animations that remaps animating expensive properties, like width, height, left and top to significantly cheaper changes using transforms. It does this by taking two snapshots, one of the element’s First position (F), another of its Last position (L). It then uses a transform to Invert (I) the element’s changes, such that the element appears to still be in the First position. Lastly it Plays (P) the animation forward by removing the transformations applied in the Invert step.
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.
By default, backgrounds cover the entire
border-box(they are applied underneath the border as well), but their
background-size) is relative to the
We can make the background cover just the
padding-boxor just the
content-boxwith the help of
clip-pathis one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways.
We’re going to dive right into
clip-pathin this article, specifically looking at how we can use it to create pretty complex animations. I hope you’ll see just how awesome the property and it’s shape-shifting powers can be.
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.
<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.
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.
- 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.
Great details of how touch and mouse events interact or overlap, and contains this super handy reference of event order: