Mapbox Landsat-live

Today we’re releasing the first edition of Landsat-live, a map that is constantly refreshed with the latest satellite imagery from NASA’s Landsat 8 satellite. With every pixel captured within the past 32 days, Landsat-live features the freshest imagery possible around the entire planet.

Uses the Landsat 8 data directly now that it’s stored on AWS.

Landsat-live goes live →
Landsat 8 data on AWS →

Elsewhere , , , Leave a comment

HTML5 Drum Machine

html5-drum-computer

Web Audio API (AudioContext) FTW.

HTML5 Drum Machine →

Elsewhere , , Leave a comment

Computer Color is Broken

Elsewhere , , Leave a comment

The Uncanny X-Men

What if Wes Anderson directed X-Men?

Elsewhere , , Leave a comment

Geofencing for the Web

navigator.serviceWorker.register('serviceworker.js').then(
  function(serviceWorkerRegistration) {
    serviceWorkerRegistration.geofencing.add(
        new CircularGeofenceRegion({
          name: "myfence",
          latitude: 37.421999,
          longitude: -122.084015,
          radius: 1000
        }), {includePosition: true}).then(
      function(geofence) {
        console.log(geofence.id);
        // If more than just a name needs to be stored with a geofence, now
        // would be the time to store this in some storage.
      }, function(error) {
        // During development it often helps to log errors to the
        // console. In a production environment it might make sense to
        // also report information about errors back to the
        // application server.
        console.log(error);
      }
    );
  });

The Geofencing API lets webapps setup geographic boundaries around specific locations and then receive notifications when the hosting device enters or leaves those areas.

All hail ServiceWorkers!

Geofencing API →

Elsewhere , , , Leave a comment

Shylight

Certain types of flowers close at night, for self-defense and to conserve their resources. This highly evolved natural mechanism is called nyctinasty, and inspired Studio Drift to create Shylight, a light sculpture that unfolds and retreats in a fascinating choreography mirroring that of real flowers.

Shylight →

Elsewhere , Leave a comment

ionic emulate “[__NSArrayM localizedDescription]: unrecognized selector sent to instance 0x7fd64840e790″

Got this error when running ionic emulate:

2015-03-16 11:13:24.112 ios-sim[50548:9106309] stderrPath: /Users/bramus/Projects/ionic/todos/platforms/ios/cordova/console.log
2015-03-16 11:13:24.113 ios-sim[50548:9106309] stdoutPath: /Users/bramus/Projects/ionic/todos/platforms/ios/cordova/console.log
2015-03-16 11:13:24.140 ios-sim[50548:9106309] -[__NSArrayM localizedDescription]: unrecognized selector sent to instance 0x7fec20d08400
2015-03-16 11:13:24.140 ios-sim[50548:9106309] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSArrayM localizedDescription]: unrecognized selector sent to instance 0x7fec20d08400'
*** First throw call stack:
(
	0   CoreFoundation                      0x00007fff85db066c __exceptionPreprocess + 172
	1   libobjc.A.dylib                     0x00007fff87d8876e objc_exception_throw + 43
	2   CoreFoundation                      0x00007fff85db36dd -[NSObject(NSObject) doesNotRecognizeSelector:] + 205
	3   CoreFoundation                      0x00007fff85cfaaa4 ___forwarding___ + 1028
	4   CoreFoundation                      0x00007fff85cfa618 _CF_forwarding_prep_0 + 120
	5   ios-sim                             0x000000010b2b2cc9 -[iPhoneSimulator LoadSimulatorFramework:] + 245
	6   ios-sim                             0x000000010b2b47e3 -[iPhoneSimulator runWithArgc:argv:] + 2297
	7   ios-sim                             0x000000010b2b4bb4 main + 101
	8   ios-sim                             0x000000010b2b2b84 start + 52
	9   ???                                 0x000000000000000b 0x0 + 11
)
libc++abi.dylib: terminating with uncaught exception of type NSException
/Users/bramus/Projects/ionic/todos/platforms/ios/cordova/run: line 158: 50548 Abort trap: 6           ios-sim launch "$SIMULATOR_APP_PATH" --stderr "$CORDOVA_PATH/console.log" --stdout "$CORDOVA_PATH/console.log" $TARGET_FLAG --exit
Error: /Users/bramus/Projects/ionic/todos/platforms/ios/cordova/run: Command failed with exit code 134
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:131:23)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:743:16)
    at Process.ChildProcess._handle.onexit (child_process.js:810:5)

The build succeeds fine, but the simulator cannot be launched. To fix it, update ios-sim

$ npm uninstall -g ios-sim
$ npm install -g ios-sim

After that ionic emulate should run fine again :)

Elsewhere , , Leave a comment

Push Notifications for the Web

push-message-b27d1cc8a4b125907d658982bbe5be2d

self.addEventListener('push', function(event) {  
  // Since there is no payload data with the first version  
  // of push messages, we'll grab some data from  
  // an API and use it to populate a notification  
  event.waitUntil(  
    fetch(SOME_API_ENDPOINT).then(function(response) {  
      if (response.status !== 200) {  
        // Either show a message to the user explaining the error  
        // or enter a generic message and handle the   
        // onnotificationclick event to direct the user to a web page  
        console.log('Looks like there was a problem. Status Code: ' + response.status);  
      throw new Error();  
      }

      // Examine the text in the response  
      return response.json().then(function(data) {  
        if (data.error || !data.notification) {  
          console.error('The API returned an error.', data.error);  
          throw new Error();  
        }  
          
        var title = data.notification.title;  
        var message = data.notification.message;  
        var icon = data.notification.icon;  
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
      });  
    }).catch(function(err) {  
      console.error('Unable to retrieve data', err);

      var title = 'An error occured';
      var message = 'We were unable to get the information for this push message';  
      var icon = URL_TO_DEFAULT_ICON;  
      var notificationTag = 'notification-error';  
      return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
    })  
  );  
});

If you ask a room of developers what mobile device features are missing from the web, push notifications are always high on the list. As of Chrome version 42, the Push API and Notification API are available to developers.

Be sure to read up on ServiceWorkers first, as push notifications rely on them.

Also: looks complicated. A tad too complicated.

Push Notifications on the Open Web →

Elsewhere , , Leave a comment

Characteristics of a well-designed user interface

Great set of slides from my friend Bytte talking about the characteristics of a well-designed UI:

Elsewhere , , Leave a comment

Quantity Queries for CSS

fig6_firstchild_li

Styling elements based on the “more than one” and “fewer than two” thresholds is a neat trick, but a flexible “quantity query” interface would accept any quantity. That is, I should be able to style “more than or equal to n” for any value of n. Then I can style “more than or equal to 6” in our navigation menu.

Quantity Queries for CSS →

Elsewhere , , , Leave a comment