Piano Tiles 2 Robot

How to set the Piano Tiles 2 record? Build a robot:

Overhead iPhone 6+ processes video of the iPad screen at 120 fps.
iPhone tracks tile speed and sends timing info via MIDI over USB through the camera connection kit.
Teensy 3.2 receives tile data and sends step/direction to stepper drivers, which smash the tiles via conductive foam on brass bars.

Elsewhere , , Leave a comment

Lumberjack vs. Web Developer

eatsleepwork_2016-Apr-27

(via)

Elsewhere , , , Leave a comment

Game of Thrones Season 5 Recap

A refresher, now that season 6 has started:

Elsewhere , Leave a comment

Motion Design in React.js with “React Motion”

import {Motion, spring} from 'react-motion';

// In your render:
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

This library provides an alternative, more powerful API for React’s TransitionGroup. For 95% of use-cases of animating components, we don’t have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don’t have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the API.

Here’s a talk by the author on React Motion:

React Motion →

Elsewhere , , , , Leave a comment

Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016

facebook-timing-attack

Video of the talk “Front-End Performance: The Dark Side” by Mathias Bynens which he gave at Fronteers Spring Conference 2016 which I attended:

In security-sensitive situations, performance can actually be a bug rather than a feature. This presentation covers timing attacks on the web, and demonstrates how modern performance-related web APIs can sometimes have a negative security impact.

The slides themselves are also available:

The mentioned Facebook timing attack – by which you can get to know private data (such as age, gender, etc.) of a user – was discovered by Tom Van Goethem, a former student of mine. Feel free to read his academic paper “The Clock is Still Ticking: Timing Attacks in the Modern Web” covering the topic.

Elsewhere , , , , Leave a comment

JavaScript Unary + Operator

Today I learned:

In JavaScript it is possible to use the + operator alone before a single element. This indicates a math operation and tries to convert the element to a number. If the conversion fails, it will evaluate to NaN. This is especially useful when one wants to convert a string to a number quickly, but can also be used on a select set of other types.

For example, the snippet below will return a timestamp, instead of a Date:

function fn() {
    return +new Date;
}

That’s because it is the equivalent of this snippet:

function fn() {
   return Number(new Date);
}

So, is there a difference between parseInt() and the unary + operator then, one might wonder? Here’s a handy overview:

sorcery-witchcraft-javascript

JavaScript Unary Add →
x vs. parseInt(x) vs. parseFloat(x) vs. Number(x) vs. +x vs. ~~x vs. x>>>0

(via a tweet by @flurin)

Elsewhere , Leave a comment

Motion Design in React.js: UI Animations with CSSTransitionGroup and TransitionGroup

react-animations-disabled react-animations-enabled
React Interface without (left) and with (right) animations

In this article, I am going to use the official components from React.js addons. There are other components/libraries that are better for the job but at the end of the article you will get a good amount of React.js animation practice to better understand these other components.

First the CSSTransitionGroup is covered:

const List = ({items, onRemoveItem}) => {
  const listItems = items.map((item, idx) => {
    return <ListItem key={item} onClick={onRemoveItem.bind(this, idx)}/>
  })

  return (
    <div className="list">
      <CSSTransitionGroup transitionName="list__item-" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        {listItems}
      </CSSTransitionGroup>
    </div>
  )
}
@keyframes add-item {
  from { transform: scale(0, 0); }
  75% { transform: scale(1.1, 1.1); }
  to { transform: scale(1, 1); }
}
@keyframes remove-item {
  from { transform: scale(1, 1); }
  25% { transform: scale(1.1, 1.1); }
  to { transform: scale(0, 0); }
}

.list__item--enter {
  animation-name: add-item;
  animation-duration: 500ms;
}
.list__item--leave {
  background: #bf4a3c;
  animation-name: remove-item;
  animation-duration: 520ms;
}

Once you get the gist of CSSTransitionGroup, the move to the underlying TransitionGroup (which gives you more control, yet is more “raw” in use) is easy

Improve React.js apps with Motion Design →
Improve React.js apps with Motion Design Source (GitHub) →

Elsewhere , , , Leave a comment

 Designing Ryanair’s Boarding Pass

ryanair-boarding-pass

In the following article we’ll outline the beginnings of the project, some of the challenges we encountered and ultimately what we learned from the process of redesigning Ryanair’s boarding pass.

Difference between this redesign and many of the Dribble shots that can be found online is that this one was actually tested early on, and is satisfying both client and business requirements. You’ll – for example – see that the barcode on the final design was altered from the proposed QR Code (as shown above) to a 2D barcode because that’s just how airports want them to be.

Designing Ryanair’s Boarding Pass →

Elsewhere , , Leave a comment

Nodal – API Services Made Easy With Node.js

nodal

Nodal is a web server for Node.js, optimized for building API services quickly and efficiently.

Boasting its own opinionated, explicit, idiomatic and highly-extensible framework, Nodal takes care of all of the hard decisions for you and your team. This allows you to focus on creating an effective product in a short timespan while minimizing technical debt

Nodal projects are ready to deploy to Heroku right out of the box, so you can have your website live in no time.

Comes with out-of-the-box working Controllers, Entities, Routing, Migrations, etc. This video will get you kickstarted:

Nodal →

Elsewhere , , , Leave a comment

Chrome DevTools Custom Object Formatters

Here’s a little Chrome DevTools gem: it supports the use of custom Object formatters. Object what?

Object formatters allow you to control how the value of a JavaScript object appears in Chrome’s console and debugger.

Say you’d like to visualize a 2D vector, instead of seeing “just” { x: 1, y: 2} appear when pushing it through console.log. Enter the custom VectorFormatter:

chrome-custom-formatters

Or say you’d like to visualize a color, instead of seeing its R, G, and B values:

OIA4kba

The possibilities are endless 🙂

Custom Object Formatters in Chrome DevTools (Article) →
Chrome DevTools VectorFormatter
Github search results for devtoolsFormatters

Elsewhere , , , Leave a comment