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 …
Tag Archives: javascript
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 →
WebGL Heatmap
Airbnb JavaScript Style Guide
Super Resize Me
Flickable — A Zepto Plugin to Enable Touch Gestures on Any HTML Element
Zepto is great for handling basic gesture events, but for more complex touch interactions it can be lacking. Flickable allows you to make any element touchable; useful for flicking between sections, or sliding elements around the page. Flickable → Flickable Thumbnail Slider Demo → Looking for a jQuery flickable plugin? Check out jQuery.flickable. Note that …
Continue reading “Flickable — A Zepto Plugin to Enable Touch Gestures on Any HTML Element”
Swig
<h1>{{ pagename|title }}</h1> <ul> {% for author in authors %} <li{% if loop.first%} class="first"{% endif %}> {{ author }} </li> {% else %} <li>There are no authors.</li> {% endfor %} </ul> var template = require(‘swig’); var tmpl = template.compileFile(‘/path/to/template.html’); tmpl.render({ pagename: ‘awesome people’, authors: [‘Paul’, ‘Jim’, ‘Jane’] }); A Node.js and Browser-based JavaScript Template Engine …