Thursday, August 16, 2012

Saturday, August 11, 2012

Saturday, August 4, 2012

Monday, July 16, 2012

thoughts/ at master · harryf/thoughts - brilliant - thanks @jamesmadson



![GitHub Logo](/images/logo.png) Format: ![Alt Text](url)

Links - automatic! [GitHub](


As Kanye West said:  > We're living the future so > the present is our past.

Posted via email from Color and Voice

Saturday, July 14, 2012

Handmade Portraits: Liberty Vintage Motorcycles - Amen.

In a crowded Philadelphia garage, Adam Cramer revives vintage motorcycles and the American tradition of grease-stained self-reliance.

Read the full Etsy blog post at

Posted via email from Color and Voice

Thursday, July 12, 2012

Todo lists are hard as hell to make - life gaming, app design and just wanting to learn backbone.js

In an effort to learn backbone.js and because I'm fascinated with todo lists, I've been noodeling on a todo list game for a couple of months. An hour here, an hour there. And, because I can't leave well enough alone, I want to turn the whole thing into a game.

What I've learned so far...

Building a "flow context" is really difficult

I have adult ADHD. Big whoop. I only say that to give you context for the next line of thinking. The idea of flow is really important to me. So I'm trying to take the ideas of context and lists and combine it with gaming to encourage myself to create a flow for getting things done. And that is really hard. How do you create a flow when you might have to interrupt it? Is flow the most important concept? Can I use a sort of meta game to control other projects?

Making life into a game isn't easy

I love gaming. MW3, BF3, Halo etc. Doing the bills and cleaning the garage aren't that fun. So, I'm working to bring that all together. And it's REALLY difficult to create a game that doesn't involve zombies and doesn't look like the matrix. How do you make a game out of your own life? And do it in such a way that helps you get shit done. With out getting bored with your own ideas 15 minutes after you reboot your server with the newest idea.

Eat your own cooking

My grandmother used to make chili and not eat it. So while we were crying because it was so spicy, she calmly went about her evening. You don't know if your cooking sucks unless you taste it yourself.

Everything is abstract UNTIL YOU LAUNCH. Until I started using my todo game, the whole thing was just an abstract pondering of data models and business logic. When I deployed the game, it changed EVERYTHING. All of a sudden, I knew exactly what didn't work and what need to be fixed. And, if you follow #leanstartup at all, it's really easy to prioritize and tweak cause you are using it! What you thought was important before you deployed, all of a sudden is completely irrelevant. It's kind of like building the house while you're living in it. The roof becomes REALLY important the moment it rains.

Posted via email from Color and Voice

Wednesday, July 11, 2012

Installing Xbox 360 Red Ring of Death Fix Kit - iFixit - Looking forward to working on this with Noah #dadgeekpower

Sea Bites (english subtitles) - beautiful short film

Usergrid | A highly-scalable data platform for mobile applications

Usergrid is a cloud-based data platform that manages objects and aids in the development of mobile client applications. It provides a core set of commonly used social media application objects, including a rich user model, as well as the ability to create new objects and object collections.

Posted via email from Color and Voice

Tuesday, July 3, 2012

Wednesday, June 27, 2012

Adventure Game - What is this awesomeness all about?

Promotion Bundle

Buy all episodes and we will give you extra stuff. Here's what's in the bundle:
  • All five episodes (EUR 19.95 value)
  • 3 gift codes. You can give these to friends (EUR 11.97 value)
  • Instant access to a special prologue chapter
  • Playable anywhere. Even on your iPad. No DRM.
The bundle will be available for EUR 19.95

Pre-order available!

For a limited time we are selling the bundle for EUR 12.99. Once the game is released, the price will go up to EUR 19.95.

Only EUR 9.99 until 27 Jun 23:59

Buy now with PayPal

Posted via email from Color and Voice

Tuesday, June 5, 2012

google-blockly - A visual programming language - Google Project Hosting - SO AWESOME!

Blockly is a web-based, graphical programming language. Users can drag blocks together to build an application. No typing required.

Check out the demos:

  • Maze - Use Blockly to solve a maze.
  • Code - Export a Blockly program into JavaScript, Dart, Python or XML.
  • RTL - See what Blockly looks like in right-to-left mode (for Arabic and Hebrew).

Blockly is currently a technology preview. We want developers to be able to play with Blockly, give feedback, and think of novel uses for it. All the code is free and open source. Join the mailing list and let us know what you think.

Posted via email from Color and Voice

Timeline JS - Beautifully crafted timelines that are easy, and intuitive to use.

Dashboard - really nice dashboard library

Check out this website I found at

Posted via email from Color and Voice

Tuesday, May 29, 2012

PaulUithol/backbone-tastypie - looking forward to playing with this.

A small compatibility layer to make backbone.js and django-tastypie work together happily. Read more

Read-Only access

Latest commit to the master branch


A small conversion layer to make backbone.js and django-tastypie work together happily.


Add backbone_tastypie to your INSTALLED_APPS setting, and add the following to your base template: <script type="text/javascript" src="{{ STATIC_URL }}js/backbone-tastypie.js"></script>

How it works

Specifically, it overrides Backbone.sync to do a GET request after creating an object (if there is no response body), and overrides Backbone.Model.prototype.idAttribute, Backbone.Model.prototype.url, Backbone.Model.prototype.parse and Backbone.Collection.prototype.parse.

Backbone.Collection.prototype.url is overridden so it can build urls for a set of models when using the fetchRelated method in Backbone-relational.

Posted via email from Color and Voice

Monday, May 28, 2012

jQuery - The Little Things | Rodney Rehm - Great post

A couple of days ago the following snippet made its way into my Twitter timeline:

$("#menu > ul > li").on("mouseenter", function() {
  $(">ul", this).stop().fadeIn(300);
}).on("mouseleave", function() {
  $(">ul", this).stop().fadeOut(300);

as you can see in the fiddle, »It Works!«:

while this code does what is expected (namely showing/hiding nested lists), it has a couple of problems that are not visible and thus not apparent to the developer.

I won't be explaining anything that hasn't been covered in other blogs 1232343234 times in the last couple of years. But apparently we can't stop repeating these things over and over again.

Registering Events

Registering multiple event handlers on the same set of elements:

  .on("mouseenter", function() { /* … */ })
  .on("mouseleave", function() { /* … */ })

can be replaced by a single call to .on():

  mouseenter: function() { /* … */ }),
  mouseleave: function() { /* … */ })

Instead of manually registering mouseenter and mouseleave events, we could have simply registered a hover:

  function() { /* mouseenter */ },
  function() { /* mouseleave */ }

And just to cover this too, you can register the same handler for multiple events:

$(selector).on("mouseenter mouseleave", function() { /* … */ });

All of this (and quite some more) is explained in the docs.

Event properties

When jQuery invokes event handlers, it passes an $.Event instance. This object contains all data associated with the event. It's a normalization of the native event objects (IE vs. real browsers) which you can still access through event.originalEvent.

We've previously established that we can register a single function for multiple events. But now we have to somehow identify if we are to show or hide the nested menu. We could do that by checking the list's display status:

$("#menu > ul > li").on("mouseenter mouseleave", function(event) {
  if ($(">ul", this).css("display") == "none") {
    $(">ul", this).stop().fadeIn(300);
  } else {
    $(">ul", this).stop().fadeOut(300);

Or we could ditch the slow and ugly DOM access and simply ask event.type:

$("#menu > ul > li").on("mouseenter mouseleave", function(event) {
  if (event.type === "mouseenter") {
    $(">ul", this).stop().fadeIn(300);
  } else {
    $(">ul", this).stop().fadeOut(300);

Delegated Events

I couldn't explain the basics of event delegation any better than Steve Schwartz. If you don't know how delegating events works, read that post!

Thanks to event delegation, we stop binding the mouseenter and mouseleave events to every single <li> in our menu. Instead, we bind one event handler to the menu, and make sure it's only triggered for events happening on our "top-level" <li>:

$("#menu").on("mouseenter mouseleave", "#menu > ul > li", function(event) {
  if (event.type === "mouseenter") {
    $(">ul", this).stop().fadeIn(300);
  } else {
    $(">ul", this).stop().fadeOut(300);

Benefits of delegating events

  • Quicker page load: DOM is only burdoned to register one event handler on the <ul>, rather than registering a handler for each <li>
  • less memory consumption: 1 event handler instead of many
  • New <li> automatically "inherit" the event handling

Considering the Context

Event delegation is possible because events "bubble" through the DOM. So each parent element in the hierarchy (up to document) is asked if it has a handler bound for event. If so, the handler is executed and the event bubbles up to the next parent element.

$(document).on("mouseenter", "#menu > ul > li", function() { console.log("document"); });
$("#menu").on("mouseenter", "#menu > ul > li", function() { console.log("#menu"); });

The above code prints #menu document. That is because document is the very last element in the bubbling chain. Knowing this, and the fact that we can abort the bubble process with event.stopPropagation() or event.stopImmediatePropagation() we can make sure that the event bubble stops at #menu:

$(document).on("mouseenter", "#menu > ul > li", function() { console.log("document"); });
$("#menu").on("mouseenter", "#menu > ul > li", function(event) {

The above code prints #menu. The handler on document is never executed, because the bubble was stopped.

With that in mind, our handler should now look like this:

$("#menu").on("mouseenter mouseleave", "#menu > ul > li", function(event) {
  if (event.type === "mouseenter") {
    $(">ul", this).stop().fadeIn(300);
  } else {
    $(">ul", this).stop().fadeOut(300);


There is tons of material on the web explaining jQuery selector performance. I'm not going to repeat all of that, just what's important to us in this case:

  • use $(context).find(selector) instead of $(selector, context)
  • use $(context).children("ul") instead of $(context).find(">ul")

Most of jQuery's traversal functions accept a selector just like .find(). In the case of .children() (and .siblings(), .next() and so on) the selector is used as a filter. So $(context).children() will give you all direct descendants, and $(context).children("ul") will filter that down to all direct descendant <ul>.

With that in mind, our handler should now look like this:

$("#menu").on("mouseenter mouseleave", "#menu > ul > li", function(event) {
  var $ul = $(this).children("ul").stop();
  if (event.type === "mouseenter") {
  } else {

Just take a minute and browse through jQuery's traversing functions. I bet there are a couple you haven't heard of yet.

Accessing Properties

There are two ways to access an object's properties:

var x = "bar";
var foo = {
    bar: "hello world";
}; === "hello world";
foo["bar"] === "hello world";
foo[x] === "hello world";

With that in mind, our handler should now look like this:

$("#menu").on("mouseenter mouseleave", "#menu > ul > li", function(event) {
  var $ul = $(this).children("ul").stop(),

  if (event.type === "mouseenter") {
    fade = "fadeIn";
  } else {
    fade = "fadeOut";


Ternary Operator

Do you know the ternary operation?

$("#menu").on("mouseenter mouseleave", "#menu > ul > li", function(event) {
  var $ul = $(this).children("ul").stop(),
    fade = event.type === "mouseenter" ? "fadeIn" : "fadeOut";


Shrinking Things

Since both variables $ul and fade are only used once, they could also be replaced by inline code:

$("#menu").on("mouseenter mouseleave", "#menu > ul > li", function(event) {
  $(this).children("ul").stop()[event.type === "mouseenter" ? "fadeIn" : "fadeOut"](300);

Strictly speaking, this should be the most performant scenario. We're not (only) writing code for the computer, but for other developers as well. While dropping the variable declarations may be nice from a performance point of view, the resulting code gets more complex to read.

I do not recommend taking this step. Keep code readable, even if that makes it a little more verbose.

Hard-Coding Options

Baking possibly configurable values into your source code is a bad idea - simply because you have no way of changing these properties later on. Try to avoid writing code that does things like .fadeIn(300). Those 300 milliseconds may look awesome on your development machine, but totally crap out on some old computer running IE6 (or on an iPhone, iPad, iWhatever). This doesn't solely apply to animations, but given the example code, we'll focus on that.

If you've ever read the .animate() docs, you'll probably know about "slow" and "fast". In its animation functions, jQuery accepts numbers (being a duration in milliseconds) and strings (being names of predefined durations). These predefined durations are accessible in jQuery.fx.speeds:

jQuery.fx.speeds = {
    slow: 600,
        fast: 200,
        // Default speed
        _default: 400

$(selector).fadeIn("foobar") will sillently fall back to jQuery.fx.speeds._default (because "foobar" wasn't defined).

For our script we could've setup jQuery.fx.speeds.listlist = 300; and used it by replacing $ul[fade](300); with $ul[fade]("listlist");. With that, we have the option of changing the 300 milliseconds whenever we want or need to.


Continue reading / watching jQuery Anti-Patterns for Performance by Paul Irish.

Posted via email from Color and Voice

Wednesday, May 23, 2012

AppData - Facebook application leaderboards, charts, and metrics - Data Awesomeness





Social Clicks



Our Network

Inside Facebook

Inside Facebook is devoted to tracking Facebook and Facebook Platform news for developers and marketers. Read more...


AppData is the most reliable way to monitor traffic trends for over 75,000 Facebook applications. Read more...

Inside Social Games

Inside Social Games is the first blog dedicated to tracking the convergence of games and social networks. Read more...

PageData - Facebook Page Metrics
PageData is the easiest way to track metrics for hundreds of thousands of Facebook Pages. Read more... -->

Inside Mobile Apps

Inside Mobile Apps is devoted to tracking mobile platforms and social applications for developers. Read more...

Posted via email from Color and Voice