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”
-
Recent Posts
Archives
Categories
Meta
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.
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);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 🙂
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.
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; // trueHow can a value not be greater than
0, not be equal to0, but be greater than and equal to0?
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 🙂
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 sizeuser-background-color: User’s requested background coloruser-foreground-color: User’s requested foreground colorsafe-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.
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) →
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.
- The Zend Framework Website sports a nice and short article on How to protect passwords with Argon2 in PHP 7.2.
- The Paragon Initiative has an extended guide on Using Libsodium in PHP Projects (*)
PHP 7.2 is due in November. What’s new? →
(*) Using the “old” version of the extension, meaning you’ll have to rename some functions and constants to get it working.