Untrusted – a user javascript adventure game

untrusted

Untrusted —or— the Continuing Adventures of Dr. Eval is an exciting Meta-Javascript Adventure Game wherein you guide the dashing, steadfast Dr. Eval through a mysterious MACHINE CONTINUUM, wherein, using only his trusty computer and the TURING-COMPLETE power of Javascript, he must literally ALTER HIS REALITY in order to find his freedom! You must literally edit and re-execute the very Javascript running the game in your browser to save Dr. Eval from this dark and confusing reality!

Really neat JavaScript puzzle game. Hit CTRL+1 to view the available API. Hit CTRL+5 to run the modified code. Your progress/solutions are saved as Github gists.

Play Untrusted →

Elsewhere , , Leave a comment

Exploring Google Maps for iOS

google-maps-ios

The Google Maps SDK for iOS is a powerful framework that makes it easy to add Google Maps to your app and take advantage of other useful Google services, such as geocoding, direction finding, and Google Street View. These free videos from Code School help you get up to speed quickly.

You can watch all videos for free.

Code School – Exploring Google Maps for iOS →

Elsewhere , , , Leave a comment

Getting modular with CSS animations

Neat little example showing how to combine CSS animations:

Check out this Pen!

Beware with animationend though, Firefox still has its quirks with it (in my experience it will fire most of the time, but sometimes it won’t).

A video walking through the code is available

Getting modular with CSS animations →

Elsewhere , , Leave a comment

Phantom 2 Vision Plus

Seriously: SHUT. UP. AND. TAKE. MY. MONEY.

Phantom 2 Vision Plus →

Elsewhere , Leave a comment

Internet Explorer Platform Status

ie-platform-status

Status of the Internet Explorer Platform: lists all new/fairly new HTML5/CSS/JS techniques that browser vendors are implementing, and Microsofts stance on / progress with it.

IE Platform Status →

Related: don’t forget about caniuse.com ;-)

Elsewhere , , , , , Leave a comment

Pixel Perfect Precision

ppp-1
ppp-2
ppp-3

A comprehensive handbook on digital design covering much of our collective knowledge and process

The (free) book is literally packed with solid advice. Might be handy to pass to that non-design/ux-savvy developer you have to work with.

Pixel Perfect Precision →

Elsewhere , , , , Leave a comment

WinJS – The Windows Library for JavaScript

winjs-site

Use WinJS to build first class apps with HTML, CSS, and JavaScript. WinJS provides high quality infrastructure like page controls, promises, and data-binding; polished UI features like virtualizing collections; and high performance Windows controls such as ListView, FlipView, and Semantic Zoom.

Think of it as a mix of jQuery UI’s Components and a JavaScript MV* framework.

Take this HTML snippet for example:

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="textContent: title"></h4>
            <h6 data-win-bind="textContent: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necesary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
        class="win-selectionstylefilled"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{
            itemDataSource: Sample.ListView.data.dataSource,
            itemTemplate: smallListIconTextTemplate,
            selectionMode: 'none',
            tapBehavior: 'none',
            swipeBehavior: 'none',
            layout: { type: WinJS.UI.GridLayout }
    }">
</div>

Combine it with this snippet of JS (and a tad of CSS, not shown here):

var items = [
        { title: "Marvelous Mint", text: "Gelato", picture: "/images/fruits/60Mint.png" },
        { title: "Succulent Strawberry", text: "Sorbet", picture: "/images/fruits/60Strawberry.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" },
        { title: "Creamy Orange", text: "Sorbet", picture: "/images/fruits/60Orange.png" },
        { title: "Very Vanilla", text: "Ice Cream", picture: "/images/fruits/60Vanilla.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" }
];

WinJS.Namespace.define("Sample.ListView", {
    data: new WinJS.Binding.List(items)
});
WinJS.UI.processAll();

… and you get this, including all necessary event handlers, animations, etc:

winjs

WinJS →
Try WinJS →
WinJS Source (GitHub) →

Elsewhere , , , Leave a comment

Composer Cheat Sheet

composer-cheatsheet

Composer is the dependency manager for PHP. This site is a one-page-only doc for this tool. It has a very nice and well-supplied documentation on the official website, this page just brings you the essential.

A video walking throug the site quickly is also available:

Composer Cheat Sheet →

Elsewhere , , Leave a comment

Beautiful Death

Neat collection of artwork related to deaths in A Song of Ice and Fire / Game of Thrones. If you know how the characters look like in the TV series but haven’t watched all episodes yet, don’t follow the link (spoilers).

tumblr_n22a7oay3c1tuzdqso1_500

tumblr_n2bw29tsTd1tuzdqso1_500

tumblr_n3cw63yvut1tuzdqso1_500

Beautiful Death →

Related:
BkT8NUfCMAAIjCW

Elsewhere , Leave a comment

Unnumbered Sparks

unnumbered-sparks

Unnumbered Sparks is a monumental interactive sculpture in the sky. Choreographed by visitors in real time through their mobile devices, at night the sculpture became a crowd-controlled visual artwork on a giant, floating canvas.

Built using Chrome; Powered by Go, WebGL, WebSockets, Web Audio, and Polymer:

Truly impressive.

Unnumbered Sparks →

Elsewhere , , , Leave a comment