It’s no secret, that on the web we have to deal with different units — from rems and pixels to percentages and viewport-based values. In this tutorial, we’ll explore the problem of animating between different units, and see how we can overcome it.

The problem

Let’s start by creating this simple animation where a div with pixel-based size expands to fill the entire viewport width and height when we click on it:

Framer-motion is a library that powers animations in Framer, and it’s now available as an independent package that we can use in React applications. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with a minimal amount of code. In this article, we’ll start with very basic animations and gradually move to the more advanced ones.

Note: animation examples in the article may not look smooth because of a low frame rate of GIF images. Rest assured, real animation are butter-smooth. You can play with them in the sandbox here.

Setup

We can…

If you’ve been using Rematch for managing state in your application, the latest release of react-redux that adds support for hooks should get you really excited.

Rematch has always tried to keep compatibility with existing react-redux API, and that stays true for the newly released version that supports hooks!

In addition to having more readable and reusable code, hooks allow us to do less work when adding type safety with TypeScript.

Let’s look at an example of doing things “the old way”. …

Note: This post covers typing Next.JS applications that use versions prior to v9. Starting with version 9, Next.JS comes with its own types by default, and their names may differ from those used in DefinitelyTyped package. If you use Next.JS version 9 and older, please refer to the official documentation. For earlier versions, continue reading :)

In this article, we’ll talk about typing Next.JS components. We’ll be using this Next.JS application that connects to Reddit API and displays a list of top posts in a given subreddit. Right now, the main component Posts.tsx …

Type aliases and interfaces are TypeScript language features that often confuse people who try TypeScript for the first time. What’s the difference between them? When should we use one over the other?

Type aliases and interfaces used to be quite different in their capabilities. However, it’s no longer true in the latest versions of TypeScript. Over time they have grown together to the point when they are almost identical. They still have some subtle differences — interfaces are more “extendable” due to the support of declaration merging, and types are more “composable” due to support of union types. …

I have recently implemented Stripe webhook integration for my application that uses Stripe Connect with managed accounts. As it turned out, the process for working with webhook events in Connect applications is slightly different, and there is no official documentation or public blog posts that cover these nuances. This short write-up is meant to bridge this gap.

So if you’ve never worked with Stripe webhooks, here’s what a typical webhook handler looks like (this Ruby snippet comes from Stripe documentation):

post "/my/webhook/url" do
  # Retrieve the request's body and parse it as JSON
  event_json = JSON.parse(request.body.read)

  #…

As a developer, for a long time I resisted the idea that solving algorithmic challenges was something worth doing. I have started and stopped learning about sorting and searching and trees and graphs a countless number of times, every time with the same outcome — I was back to the projects where none of these algorithms were applicable, and the knowledge quickly faded away due to a lack of use.

But recently I decided to give it another try, and this time was a success. I used a new approach that helped me to stay on track long enough to…