AUTOMATICA – Robots vs. Music

Nigel Stanford has created an installation sporting industrial robot arms to play a song named “Automatica”

A behind the scenes is also available:

Also worth checking out is his “CYMATICS: Science Vs. Music”

Elsewhere , Leave a comment

Getting Started with the Web Animations API

The Web Animations Api (short WAAPI) tries to combine the power of CSS with the flexibility of Javascript in order to allow complex animation sequences. There are big differences between the WAAPI and for example libraries like GSAP, the biggest one being that the WAAPI is going to provide native browser support without needing to load an external library.

Getting Started with the Web Animations API →

Elsewhere , , Leave a comment

How to make an ARKit app in 5 minutes using React Native

Apple has made ARKit very easy to use, but it still requires quite a lot of efforts to properly set it up and run the first demo, especially for those who are not very familiar with 3D programming. What we are going to show you in this article is, with the help of React Native and react-native-arkit, you can skip the non-trivial setting-ups and will be able to write your AR app in just 5 minutes.

// index.ios.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import { ARKit } from 'react-native-arkit';
export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ARKit
          style={{ flex: 1 }}
          debug // debug mode will show feature points detected and 3D axis
          planeDetection // turn on plane detection
          lightEstimation // turn on light estimation
        />
          <ARKit.Box
            pos={{ x: 0, y: 0, z: 0 }}
            shape={{ width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 }}
          />
        </ARKit>
      </View>
    );
  }
}
AppRegistry.registerComponent('MyFirstARKitApp', () => App);

How to make an ARKit app in 5 minutes using React Native →

Elsewhere , , , Leave a comment

A New Kind of Map: It’s About Time

The Mapbox Team:

Recently, we’ve been thinking of a visualization that cuts directly to the way in which people make decisions about where to go: what would a map look like if we swept the physical world away completely, in favor of the time needed to move around it?

We’ve been prototyping a simple discovery tool on this idea. We take search results from the Foursquare API and array them around the user at the center

And yes, that prototype is publicly available 🙂

A New Kind of Map: It’s About Time →
TimeMap Prototype →

Elsewhere , , Leave a comment

Strategies for Derailing a React Conversation

Fun list tweeted just now by Redux creator Dan Abramov:

Strategies for derailing a React conversation:

  • HOC vs render props
  • Is binding functions expensive
  • CSS in JS
  • PATENTS
  • Redux
  • Web Components
  • class vs className
  • <If>
  • Size of node_modules
  • Context

I wonder which ones, if any, will matter in three years.

Always keep questioning the status quo.

Elsewhere , , Leave a comment

Javascript : The Curious Case of `null >= 0`

Abinav Seelan takes a deep dive to unearth why exactly this happens in JavaScript:

null > 0; // false
null == 0; // false

null >= 0; // true

How can a value not be greater than 0, not be equal to 0, but be greater than and equal to 0?

Javascript : The Curious Case of `null >= 0` →

Elsewhere , Leave a comment

One-off Futurama Podcast “Radiorama”

Futurama’s back … with a one-off podcast episode:

I’ve listened to this one whilst driving home today. Quite enjoyed it 🙂

Elsewhere , Leave a comment

Rendering Sites Fullscreen in Safari on iPhone X / Introducing “User Agent Variables”

What the …?

By default, the new iPhone X in landscape mode will contain sites in the so called “safe area”, resulting in white bars being rendered on either side of the site (src).

The color, white by default, can be tweaked by altering the background-color on the <body> element. Do note that it’s only background-color though: it doesn’t take gradients/background images into account, so you won’t jump very far with this …

Cover it up!

By adding viewport-fit=cover to the viewport meta tag, it’s possible to make the site stretch out beyond the safe area so that it takes up the full width of the device (src)

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Embracing the notch

Whilst the use of viewport-fit=cover indeed stretches out the site, it also has a side effect of “the notch” overlapping with the site’s content.

To cater for this, Apple has proposed the concept of “User Agent Variables”, accessible via the constant() function in CSS.

The current list of proposed User Agent Variables is:

  • user-font-size: User’s requested font size
  • user-background-color: User’s requested background color
  • user-foreground-color: User’s requested foreground color
  • safe-area-inset-top: Inset, as a <length> from the top of the viewport to the title-safe content area.
  • safe-area-inset-right: Inset, as a <length> from the right of the viewport to the title-safe content area.
  • safe-area-inset-left: Inset, as a <length> from the left of the viewport to the title-safe content area.
  • safe-area-inset-bottom: Inset, as a <length> from the bottom of the viewport to the title-safe content area.

Using these safe-area-inset-* constants as the padding of a site, overlap of the notch can be prevented.

body {
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}

Additionally, these values can be used for elements that have position: absolute; / position: fixed; applied.

#element {
  position: fixed;

  /* default position */
  top: 0;

  /* “safe” position (iOS 11) */
  top: constant(safe-area-inset-top);
}

Phew.

Elsewhere , , , Leave a comment

Game of Thrones Fan Theory: Bran Stark is the Night King

It is beautiful beneath the sea, but if you stay too long, you’ll drown.

Game of Thrones Theories: The identity of the Night king (based on TV series-facts) →

Elsewhere , Leave a comment

Getting Ready for PHP 7.2

PHP 7.2 is planned to be released on 30th November 2017. And it comes with two new security features in the core, several smaller improvements and some language legacy clean-ups. In the article, I will describe what the improvements and changes are. I read the RFCs, discussions on internals and PRs on Github, so you don’t have to.

The two security-related features are Argon2 Password Hashing and the integration of Libsodium as a core extension.

PHP 7.2 is due in November. What’s new? →

(via Freek)

(*) Using the “old” version of the extension, meaning you’ll have to rename some functions and constants to get it working.

Elsewhere Leave a comment