subCHILD

Archive for the Uncategorized category

iStockutils.com – Built with Flask and Now Live

I recently set out to learn Python, specifically on the Flask (+Werkzeug/Jinja2) microframework, and did so through developing a tool for iStocphoto.com contributors. The result is iStockutils.com, and the code is available for viewing/forking on GitHub.

I still have much more to learn, but though this exercise I’ve become a big fan of Python and, after working with lots of different templating engines over the years, really like the format and flexibility of Jinja2. Kudos to Armin Ronacher for his fantastic work on all of this.

No kudos though to the iStockphoto folks who haven’t even responded to my request for access to their API. This means that all of the data is currently scraped from the HTML. Nasty.

Featured Posts

posted by admin in Uncategorized

Thanks for stopping by. While you’re here, you might as well check out the LiveXMLEditor, Slideshowify, JS and CSS Bundler, among other things. Enjoy.

Slideshowify: Ken Burns Slideshow Effect as a jQuery Plugin

Slideshowify is a jQuery plugin for creating a slideshow of images that will fill the screen with a (cropped) image, then pan across to reveal the rest of it. This is commonly referred to as the Ken Burns Effect and is often seen in documentaries. A nice version is of it can be seen in that Mac screensaver.

Anyhow, here’s a stab at such a thing. Some future enhancements are obvious (pan direction, zooming, transition options, etc.) and anticipate finding the time to add that stuff shortly.

For now, check out the code on github.com and see a demo at www.subchild.com/slideshowify

To use it, include jQuery, jquery.slideshowify.js, then feed slideshowify a selector that matches some images. For example:

$("img").slideshowify();

Alternatively, you could load data from an external feed and call $.slideshowify() with configuration options:

$.slideshowify({
 	dataUrl   : "http://www.gallerama.com/services/gallery/get.php?gid=2107&versions[]=9",
	dataType  : "jsonp",
	randomize : true,
 	filterFn  : function(imgs){
 		var fixedImgs = [];
 		$.each(imgs, function(i, img){
 			fixedImgs.push(img.versions["9"]);
 		});
 		return fixedImgs;
 	},
	afterFadeIn : function(imgData){},
	beforeFadeOut : function(imgData){}
 });

Most of the params here are passed directly to jQuery’s $.ajax() method. Some are used to reformat the data (slideshowify() expects an array of objects of this format: {src:”domain.com/path/to/image.jpg”, w:”600″, h:”400″}), others are hooks or speed (fade, delay) options.

Proper documentation will be provided. Most likely.

Dynamic CSS Loading with jQuery 1.4: Cross-Browser Problem Solved

posted by admin in Uncategorized

Loading an external CSS stylesheet with jQuery is cake.  But in version 1.4 it stopped working in IE. Specifically, doing this doesn’t work:

$('<link href="/path/to/stylesheet.css" rel="stylesheet" type="text/css" />').appendTo("head");

After investigating and Googling this a bit, I discovered that this technique does work:

var $link = $('<link/>').appendTo("head");
$link.attr({
	href : "/path/to/stylesheet.css",
	rel  : "stylesheet",
	type : "text/css"
});

However, this doesn’t work in Opera (only the latest version tested).

The solution is perhaps to simple to bother writing up, but here it is anyway:

$('<link href="/path/to/stylesheet.css" rel="stylesheet" type="text/css" />').appendTo("head");
$link.attr({
	href : "/path/to/stylesheet.css",
	rel  : "stylesheet",
	type : "text/css"
});

Featured Posts

posted by admin in Uncategorized

Thanks for stopping by. While you’re here, please check out the LiveXMLEditor and JS and CSS Bundler, among other things. Enjoy.

Firebug Console: Best (Cross-Browser) Practices

The Firebug plug-in is an essential and unparalleled tool for (web) UI development.  If you’re not using it, you should be.  But in any case, some of its features can make a lazy (or busy) programmer cause serious problems in other browsers (unless Firebug Lite is installed).

Over the past few years I’ve tried a number of approaches for ensuring that my Firebug console calls don’t cause errors on browsers which either don’t support it or don’t have Firebug installed.  A few approaches I’ve used myself are described here.

1. Checking for existence of the console before each call to it

if (typeof console!="undefined" && console.log){ console.log("blah blah"); }

or

if (typeof console!="undefined" && console.dir){ console.dir(someObject); }

While this is a safe way to avoid errors when the Firebug console is unavailable its pretty nasty since we don’t want this code repeated all over the place.

2. Creating dummy console methods when they are not available and using console freely

(function(){
   if (!window.console||!console.firebug){
      var methods = [
         "log", "debug", "info", "warn", "error", "assert",
         "dir", "dirxml", "group", "groupEnd", "time", "timeEnd",
         "count", "trace", "profile", "profileEnd"
      ];
      window.console = {};
      for (var i=0; i<methods.length; i++){
         window.console[methods[i]] = function(){};
      }
   }
})();

More

Links vs. JavaScript Event Handlers

posted by admin in HTML, JavaScript, Uncategorized

Anchor tags are frequently used to do something other than what they were meant for, such as executing some JavaScript code.  I’m talking about cases such as these:

<a href="javascript:doSomething()">Click Here</a>

// or...
<a href="javascript:void(0)" onclick="doSomething()">Click Here</a>

Both of these are bad practice and should be avoided.  The purpose of the anchor tag is to provide a link to a separate page so that the its interpreter (human or program, such as a search crawler) can use the value of its HREF attribute to reach another page (URL).  If what you are putting into the HREF attribute is not a valid URL, you’re very likely using the wrong tag.

More

Detecting user's installed version of the Silverlight plug-in

posted by admin in Code, JavaScript, Uncategorized

Microsoft’s Silverlight plugin is finding its way to more and more high profile websites.  NBC used it to broadcast the Beijing Olympics and major sport sites are using to show live games and highlights.  (I should note that Silverlight is capable of much more than video playback, but that’s primarily what we’ve seen it used for recently.)

The JavaScript code which Microsoft provides to help with plug-in detection and rendering is, while helpful, not entirely complete.  For example, it currently lack a means of detecting the installed version.  This could be useful for tracking plugin penetration among your users, etc.  Here’s a simple script for detecting which, if any version of Silverlight is installed on a visitor’s computer.

var SilverlightVersion = "";

try { // SL version detection for Internet Explorer
	var control = new ActiveXObject('AgControl.AgControl');
	if (control.IsVersionSupported("1.0")){ SilverlightVersion = "1"; }
	if (control.IsVersionSupported("2.0")){ SilverlightVersion = "2"; }
	control = null;
}
catch (e) { // SL version detection for non-IE browsers
	var plugin = navigator.plugins["Silverlight Plug-In"] ;
	if (plugin){ SilverlightVersion = plugin.description.substring(0,1);	}
}

if (SilverlightVersion !== ""){
	document.write("Your browser supports Silverlight version: " + SilverlightVersion);
}
else {
	document.write("You do not have Silverlight installed.");
}
Recent Posts
Recent Comments
About
Simon: Hi there, i am looking for a parameter which can change direction of mov...
CM: Hi, Alex! I know exactly what king of messages you get, like "Hi, I'm new to php a...
admin: Alive and well....
SJ: If the array size exceeded 10 then sorting will not work. any help?...
shutterstock: I've learn several excellent stuff here. Definitely price bookmarking for revisiting....

Subchild is a blog about web development. It's author is Aleksandar Kolundzija, himself a web developer for 10++ years, presently a Hacker-in-Residence at betaworks. Prior to betaworks, Alex worked at Google, Meebo, MLB Advanced Media (MLB.com), Razorfish, and elsewhere.

Some of Alex's side projects include Gallerama.com, Slideshowify, LiveXmlEdit, and other blogs like Dopevector and blog.gallerama.com. When he's not working on any of those, Alex is probably playing guitar, producing music, mixing records, taking photos, playing with his kid, or watching documentaries about particle physics, the monetary system, etc.

Let him know what's up: ak @ subchild.com