Automatic Bullseye MOVING Dartboard

Former NASA engineer Mark Roper: I fulfilled a 3 year long dream to create a dartboard where you get a bullseye every time thanks to some engineering. Basically, you throw a dart and then a Vicon motion capture system tracks the dart in the air. We use those x,y,z positions in matlab to predict where …

An Animated Intro to RxJS

In Reactive Animations with CSS Variables the subject of RxJS was touched. If you’re not familiar with RxJS, CSS-Tricks has nice introductory article on the subject: You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking …

Why you’d want to hold off buying a Nintendo Switch just yet

Painful to watch: Many Switch users are experiencing problems from day one. Reports are submitted everyday with new pictures and videos. Loud crashes, errors, bricked blue/orange screens, dead pixels, ingame artifacts, unrecognized cartridges, loose/woobly joycons, scratches and design flaws.

Mocking Individual CSS Transform Functions using CSS Variables

In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale by falling back to their default values. This will change when the “CSS Transform Module …

Using Subsurface with a Suunto Vyper on macOS (OS X)

Profile of one of the dives I did in the Maldives, displayed using Subsurface Download the Virtual COM Port Drivers and reboot your iDevice. After that Subsurface should recognise your Suunto Vyper. As a diver one logs all his/her dives into a paper logbook. In the paper logbook one generally notes things like the gear …

The success to the animations in “Who Framed Roger Rabbit”

As the author calls it: “the fundamentals of hybridizing animation with live action film”. Connected eye lines Physical Interactions with the Environment Light & Shadow Accuracy … always take the chance to “Bump The Lamp” 🙂 (via The Verge)

Deep dive CSS: font metrics, line-height and vertical-align

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline …

Reactive Animations with CSS Variables

Despite its name, reactive animations have nothing to do with React, the framework/library/whatever it is. Rather, reactive animations can be described in terms of discrete changes caused by any number of events. The overall idea is that JS captures multiple streams of events into a single stream, and emits those values over to CSS, where …