howler.js – Modern Web Audio Javascript Library

var sound = new Howl({ urls: [‘sounds.mp3’, ‘sounds.ogg’], sprite: { blast: [0, 2000], laser: [3000, 700], winner: [5000, 9000] } }); // shoot the laser! sound.play(‘laser’); howler.js defaults to Web Audio API and uses HTML5 Audio as the fallback. The library greatly simplifies the API and handles all of the tricky bits automatically howler.js → …

Google Maps v3 Move Polygon

UPDATE 2018.03.07: The issue requesting to have this in the core of Google Maps got marked as fixed … unfortunately I cannot find this change back in the documentation, so I’m not too sure if it’s actually fixed or not. Will keep tracking it. Since Google Maps v3.11 (*) it’s possible to move around a …

Mercator Puzzle Redux

The aforementioned Mercator Puzzle is quite nice, but it’s static: you always get presented the same 15 countries at the same 15 starting positions. To counter that, I decided to make the thing dynamic: you get to place 15 countries chosen from a set of 178 in total. If you don’t know the anwser, just …

Google Maps v3 Drag Polygon

It’s really not that hard. No need for one of the many diy scripts; just set the draggable property on your instance of google.maps.Polygon and you’re good to go. Note: draggable was introduced in Google Maps v3.11 (dd 22 January 2013). The current stable version of Google Maps still is 3.10 however. For now (until …

Packery — A new JS-based layout library

From the creator of Masonry and Isotope: I’m making a new layout library, called Packery. It is awesome because it resolves two of biggest and oldest issues with Masonry or Isotope. It fills gaps You can drag item elements It’s been in development for the past several months, and it still has a ways to …

Responsive Typography using Face Detection

Typesetting based upon your distance to your screen. Clever use of WebRTC’s getUserMedia and JavaScript Face Detection In case you don’t have a capable browser, this is what it looks like: Responsive Typography: Breakpoints Demo → Responsive Typography: Realtime Demo → (via Jeremy) Related: headtrackr →