via tridays.com
Wednesday, May 30, 2012
Tuesday, May 29, 2012
PaulUithol/backbone-tastypie - looking forward to playing with this.
public PaulUithol / backbone-tastypie
JavaScriptPythonA small compatibility layer to make backbone.js and django-tastypie work together happily. — Read more
Latest commit to the master branch
Set auth headers for the extra GET on an empty POST response as well.… …
… Fixes #18.commit f253883cc9PaulUithol authored 11 days ago
name age message backbone_tastypie 11 days ago Set auth headers for the extra GET on an empty POST response as well.… [PaulUithol] test 11 days ago Set auth headers for the extra GET on an empty POST response as well.… [PaulUithol] .gitignore 5 months ago Upgrade test libs, add a .gitignore [PaulUithol] MANIFEST.in 8 months ago Add MANIFEST [areski] README.md 8 months ago Fix Readme wrong application name to include in INSTALLED_APPS [areski] setup.py 8 months ago Fix installer setup.py to include package data [areski] README.mdBackbone-tastypie
A small conversion layer to make backbone.js and django-tastypie work together happily.
Usage
Add
backbone_tastypieto yourINSTALLED_APPSsetting, 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.syncto do a GET request after creating an object (if there is no response body), and overridesBackbone.Model.prototype.idAttribute,Backbone.Model.prototype.url,Backbone.Model.prototype.parseandBackbone.Collection.prototype.parse.
Backbone.Collection.prototype.urlis overridden so it can build urls for a set of models when using thefetchRelatedmethod in Backbone-relational.
via github.com
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:
$(selector)
.on("mouseenter", function() { /* … */ })
.on("mouseleave", function() { /* … */ })can be replaced by a single call to
.on():$(selector).on({
mouseenter: function() { /* … */ }),
mouseleave: function() { /* … */ })
});Instead of manually registering
mouseenterandmouseleaveevents, we could have simply registered a hover:$(selector).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
mouseenterandmouseleaveevents 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 handlingConsidering 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 forevent. 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 becausedocumentis 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) {
event.stopImmediatePropagation();
console.log("#menu");
});The above code prints
#menu. The handler ondocumentis 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) {
event.stopImmediatePropagation();
if (event.type === "mouseenter") {
$(">ul", this).stop().fadeIn(300);
} else {
$(">ul", this).stop().fadeOut(300);
}
});Selectors
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();
event.stopImmediatePropagation();
if (event.type === "mouseenter") {
$ul.fadeIn(300);
} else {
$ul.fadeOut(300);
}
});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";
};foo.bar === "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(),
fade;if (event.type === "mouseenter") {
fade = "fadeIn";
} else {
fade = "fadeOut";
}event.stopImmediatePropagation();
$ul[fade](300);
});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";event.stopImmediatePropagation();
$ul[fade](300);
});Shrinking Things
Since both variables
$ulandfadeare only used once, they could also be replaced by inline code:$("#menu").on("mouseenter mouseleave", "#menu > ul > li", function(event) {
event.stopImmediatePropagation();
$(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). Those300milliseconds 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 injQuery.fx.speeds:jQuery.fx.speeds = {
slow: 600,
fast: 200,
// Default speed
_default: 400
};
$(selector).fadeIn("foobar")will sillently fall back tojQuery.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.Conclusion
- Use Event Delegation
- Mind your selectors, avoid
find()if jQuery has a traversal function for it- DRY: Dont Repeat Yourself - keep your code as concise as possible
Continue reading / watching jQuery Anti-Patterns for Performance by Paul Irish.
Wednesday, May 23, 2012
AppData - Facebook application leaderboards, charts, and metrics - Data Awesomeness
Our Network
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 is the first blog dedicated to tracking the convergence of games and social networks. Read more...
PageData is the easiest way to track metrics for hundreds of thousands of Facebook Pages. Read more... -->
Inside Mobile Apps is devoted to tracking mobile platforms and social applications for developers. Read more...
via appdata.com
Tuesday, May 22, 2012
Instagram Developer Documentation - really nice docs.
Hello Developers.
The first version of the Instagram API is an exciting step forward towards making it easier for users to have open access to their data.
Our goal is to make it easier for developers to create interesting and innovative ways to browse the ever-growing volume of photos posted to Instagram every second.
via instagr.am
Friday, May 18, 2012
Wednesday, May 16, 2012
ImageOptim — make websites and apps load faster (Mac app)
DownloadVersion 1.4.0
Mac OS X 10.6-10.7Not using Mac? Check out Trimage
Available in:
English, French, German, Italian, Dutch, Danish, Norwegian, Russian, Spanish, Portuguese and Polish. Help translate it!ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.
ImageOptim seamlessly integrates various optimisation tools: PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.
It's excellent for publishing images on the web (easily shrinks images “Saved for Web” in Photoshop) and also useful for making Mac and iPhone/iPad applications smaller (see Xcode warning).
How to use it
Simply drag'n'drop images or folders into the window! You can also drop files on ImageOptim's Dock icon or launch it from shell scripts with:
open -a ImageOptim.app *.png.If you install this system service you can run ImageOptim from Finder's context menu.
More about PNG
My article “PNG that works” explains why ImageOptim removes gamma information and how to get even smaller PNG files with transparency that works in ancient versions of IE.
Open Source
ImageOptim is free, open-source software under terms of the GPL v2. Your contributions are welcome! Please grab the source code and improve it! Feel free to contact me for assistance.
PNGOUT is bundled with permission of Ardfry Imaging, LLC and is not covered by the GPL.
Frequent answers
- Photoshop munges optimized PNGs!
ImageOptim converts images to PNG8 alpha format when that is possible without loss of quality. That's the most efficient way to store alpha channel.
Photoshop CS5 and older have a bug which causes such images to be loaded incorrectly. The bug is fixed in Photoshop CS6.
To undo optimisations and get the big fat, old-Photoshop-compatible PNG back, open PNG in Preview.app and save it again (“Export” in Lion).
Alternatively, switch to Fireworks or only optimize copies/final versions of images.
- Will ImageOptim be in the AppStore?
- Unfortunately not, because Apple has explicitly forbidden publication of Free (as in freedom) Software in the AppStore. You can get ImageOptim here, without DRM.
Using The Unarchiver 3.1?
Due to bugs in Mac OS X Quarantine/Sandbox features the archive will not extract properly with The Unarchiver 3.1. Please get fixed version from author's website (not the AppStore).
Site designed by Auforia.
via imageoptim.com
Tuesday, May 8, 2012
Tufts Lacrosse 2010 - Road to the Championship Official Documentary - YouTube - Nicely Done
"We're Out Here," an Oregon Lacrosse Duckumentaryby bhsvideodad41,764 views
via youtube.com
Friday, May 4, 2012
Beastie Boys Co-Founder Adam Yauch Dead at 47 | Music News | Rolling Stone - Wow. So sad.
Beastie Boys Co-Founder Adam Yauch Dead at 47
Influential rapper was diagonosed with cancer in 2009
May 4, 2012 12:55 PM ET-->-->
Adam Yauch aka 'MCA' performs with The Beastie Boys in Irvine, California in 2004.Chris Polk/FilmMagicAdam Yauch, one-third of the pioneering hip-hop group the Beastie Boys, has died at the age of 47, Rolling Stone has learned. Yauch, also known as MCA, had been in treatment for cancer since 2009. The rapper was diagnosed in 2009 after discovering a tumor in his salivary gland.
Yauch sat out the Beastie Boys' induction to the Rock and Roll Hall of Fame in April, and his treatments delayed the release of the group's most recent album, Hot Sauce Committee, Pt. 2. The Beastie Boys had not performed live since the summer of 2009, and Yauch's illness prevented the group from appearing in music videos for Hot Sauce Committee, Pt. 2.
Yauch co-founded the Beastie Boys with Mike "Mike D" Diamond and Adam "Ad-Rock" Horowitz in 1979. The band started off as a hardcore punk group, but soon began experimenting with hip-hop. The band broke big with their first proper album, Licensed to Ill, in 1986, and further albums Paul's Boutique, Check Your Head and Ill Communication cemented the band as a true superstar act.
In addition to his career with the Beastie Boys, Yauch was heavily involved in the movement to free Tibet and co-organized the Tibetan Freedom Concerts of the late Nineties. In 2002, he launched the film production company Oscilloscope Laboratories.
To read the new issue of Rolling Stone online, plus the entire RS archive: Click Here
prev
Q&A: John Fogerty on All-Star Duets LP, Unlikely Creedence Reunion Music Main
Please enable JavaScript to view the comments powered by Disqus. blog comments powered by Disqus
via rollingstone.com
Subscribe to:
Posts (Atom)