Web Bluetooth API in Chrome

navigator.bluetooth.requestDevice({ filters: [{ services: [‘battery_service’] }] }) .then(device => { // Human-readable name of the device. console.log(device.name); // Indicates whether or not the device is paired with the system. console.log(device.paired); // Filtered UUIDs of GATT services the website origin has access to. console.log(device.uuids); // Attempts to connect to remote GATT Server. return device.connectGATT(); }) .then(server …

Lightyear.fm – A journey through space, time, and music

Radio broadcasts leave Earth at the speed of light and travel outwards into space. Follow them through the Milky Way as you scroll backwards through time and listen to what the stars hear. Built using Three.js. Taking a look at the source code reveals all tracks used. And oh, don’t forget the “Inverse Square Law …

Targetting the OS X System Font in CSS

body { font-family: system-font, -webkit-system-font, -apple-system-font, “.SFNSDisplay-Regular”, HelveticaNeue, LucidaGrande; } On a fresh install of OS X 10.11 (El Capitan) there’s no San Francisco font installed. But it’s the system font, so how is this possible? Hence the sort of magic above to actually get it working. I Left My System Fonts in San Francisco …

Material Design Lite

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. By the folks at Google Material Design Lite → Related: Paper Elements, a …

The Emerging Global Web

Fascinating presentation by Stephanie Rieger which I saw at the excellent (and unfortunately last) Mobilism: This presentation will introduce you to fascinating and innovative services that are re-shaping the web to serve the consumers of tomorrow. Driven by mobile, the power of personal relationships, and the breakneck pace of globalisation, these services provide a glimpse …

Tiny two way data binding

Awaiting Object.observe() to land, Remy Sharp has written his own simple implementation: Data binding to the DOM is just one of those things that’s damn handy when you’ve got it and super laborious when you don’t. The problem is that it usually comes at a price of a hefty framework. So, as any good re-inventer …

Responsive day out 3: the final breakpoint

Extensive write-up by Hidde on the third edition Responsive Day Out: As may have become clear from my notes above, Responsive Day Out 3 was a day full of variety. I had the feeling it could have easily been called Web Day Out, and I guess that makes sense, as responsive web design has naturally …