Animating vectors in Android with AnimatedVectorDrawable

Seeing Lottie in action, I was reminded of Android’s AnimatedVectorDrawable which also allows one to do vector based animations. This class animates properties of a VectorDrawable with animations defined using ObjectAnimator or AnimatorSet. If you’re familiar with SVG, the AnimatedVectorDrawable XML contents will look familiar. The “Endless Pin Jump” animation (pictured above) for example is …

Easily add high-quality animation to any native app with Lottie

By the folks at AirBnB: Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Lottie uses a JSON file – generated by the BodyMovin plugin for After Effects as its source, and then renders it …

Crafting Data-Driven Maps

At Uber, we use maps for everything — visualizing millions of geo data points, monitoring road conditions, and advocating for policy change in cities around the world. Over the last few years we have experienced immense growth. As a result, we have many teams across the organization producing map visualizations for a wide range of needs. We …

Boston Dynamics’ Handle

Again great stuff by the Boston Dynamics team. It looks like their Atlas robot with wheels underneath it. (fragment starts at 3:45) It’s satisfying to see how smooth this thing goes and jumps, all whilst remaining in perfect balance. It’s also pretty scary to know that this thing can outrun me any time … I, …

Stylus nth-of-m-child(n,m) Selector

. As explained/linked in (ab)using CSS3’s :nth-child() selector to invent new ones and Quantity Queries for CSS it’s possible to create new types of CSS selectors by cleverly combining a few the available CSS pseudo selectors. One of those new selectors is the :nth-of-m-child selector: /** * :nth-of-m-child selector * This selector will select the …

CSS-Only Direction Aware Hover

In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS General Sibling Selector (viz. ~) to rotate the content. Internally it looks like this: Note …

“Are You Fucking Kidding Me?” by Hillary Clinton (Parody)

Great satirical piece by a fake Hillary Clinton account on Medium: None of you gave a fuck about my email server. None of you even knows what a fucking email server is or does. You were just waiting for any excuse — any excuse at all — to be like “yep, that’s why I hate that bitch.” 😂 Are …

Prevent time drift in Docker with docker-time-sync-agent

Today, at work, a colleague of mine ran into some time issues with his Docker containers: the time was clearly off. Turns out it’s a common problem: Docker’s daemon fails to update the VM’s time after computer wakes up from sleep. The result is that VM’s clock will be set to a past time. This …

ESNext: JavaScript “Optional Chaining Operator”

UPDATE February 2018: The proposed operator got renamed from “Null Propagation Operator” to “Optional Chaining Operator”. This post has been updated to reflect this name-change. UPDATE December 2019: This feature has now advanced to Stage-4 and will be part of the ES2020 Specification! 🎉 Earlier today I was delighted to see that the “Optional Chaining …