A tiny expression compiler for React Native Animated values

  • Its expressive API lets developers compose animated effects based on time, spring physics and even real-time user interaction with distinct ease.I’ve recently released animated.macro, a small JavaScript package that improves the ergonomics of working with animated values in React Native apps — and, more importantly, has been fun to build.
  • The results of these operations can then be used anywhere the basic values can.For instance, here’s how you add two animated values together:const result = Animated.add(x, y);And here’s a slightly more involved calculation:const result = Animated.modulo( Animated.add(phase, Math.PI * 2 + angle), Math.PI * 2);What can be improvedOn closer inspection, the…
  • This can be an inconvenience when refactoring animation code.In the second example, the types of phase and angle (and of Math.PI) similarly dictate the shape of the surrounding code — e.g. Animated values can’t be added with + and plain numbers can’t be added with Animated.add().
  • Can we do better?Yes.Introducing animated.macro 🕺🏽🔢animated.macro lets you write JS-like arithmetic expressions that operate on animated values and plain numbers alike.
  • These expressions take the form of tagged template literals that evaluate to animated values.The second example above can now be written as:import animated from “animated.macro”;const result = animated` (${phase} + ${Math.PI} * 2 + ${angle}) % (${Math.PI} * 2)`;Addition, subtraction, multiplication, division and modulo are all supported, with the same…

The Animated library, which allows animations to be set up in JS and executed on the native thread, is a mainstay of the React Native programming model. Its expressive API lets developers compose…
Continue reading “A tiny expression compiler for React Native Animated values”

ZEIT – Next 3.0 Preview

  • On the heels of our announcement of free static deployments earlier today , we are excited to introduce a beta release of the upcoming Next.js 3.0, featuring , dynamic components and various bugfixes.
  • It will seamlessly build your Next.js app as a standalone static website .
  • The exported app supports almost every feature of Next.js , including dynamic URLs, prefetching, preloading and the new dynamic imports.
  • Next.js 3.0 comes with TC39 dynamic import support.
  • Next.js supports server side rendering for dynamic imports.

Next 3.0 features Static Exports with one command and Dynamic Imports
Continue reading “ZEIT – Next 3.0 Preview”