subCHILD

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.

A Gentle DropBox Rant

posted by admin in Rants

logoSo let me get this straight… Dropbox.com is supposed to save me trouble by maintaining duplicates of files stored in the My Dropbox folder on all machines which I have the app installed, and on their website.  That seems like an awful lot of redundancy already. But wait, it also keeps a local cache on each machine in a hidden directory and with no way to change settings for its size and expiration.

So, a 100MB file, “shared” across 3 machines takes up 3 x 100MB + DropBox storage (lets ignore backups on their end for now, but they do exist) = 400MBs, and then each machine has a copy in the (hidden) cache which brings this up to 700MBs (assuming that they don’t cache multiple versions). Even if all this makes sense, that seems like a big waste of space, doesn’t it?  And lets not forget the bandwidth.  The same file has to be uploaded, then downloaded to each My Dropbox folder. Then copied to the cache directory on each, etc.  All this seems very wasteful.

Oh, and the memory usage of the app running in the background is currently 75MBs, and all of my files are in sync. What’s it doing that requires so much memory? (Outlook requires just a tad more and we know what a hog that thing is.)

There must be a better solution to keep stuff in sync.

Whatever,… I guess I have a love-hate relationship with Dropbox since I do use it.

But maybe a better approach is using ExpanDrive and keeping all of the files you need to access from multiple destinations there, in a single location. Size limitations are much less of a consideration, but you do need to setup an FTP server and have it running around the clock.  Unless you just get hosting somewhere and you’re good to go. (By the way, ExpanDrive version 2, currently available for Mac only, supports S3. So, you get an S3 account, install ExpanDrive on all of your Macs and you have access to the same files. True, all access goes over the wire and will be slower, and you won’t have access to anything offline, but its worth considering.)

By the way, if you do want to try out DropBox please do so by clicking this link and sending a referral credit my way:

https://www.dropbox.com/referrals/NTMyNDcxMjg5

The "MS Shell Dlg" Mystery (Solved)

posted by admin in browsers, CSS, design, fonts, HTML

If you haven’t noticed (and are using a PC), the headlines on this blog should now be rendered using the MS Shell Dlg font [I've since changed this and have been experimenting with custom fonts via @font-face, but all information in this post still applies otherwise.] I learned about this font just now after trying to figure out why tadalist.com‘s input fields were rendering using it instead of the fonts specified in the CSS rule. I’m still unsure why the computed style lists MS Shell Dlg as the font since its never explicitly specified nor is the the default, but it is. (If you know why this is, drop a comment below.)

Anyhow, I really like the way this font looks at 20+ pixels and bolded, so its the new style for the (H2) headers. If you’re on a Mac, you should see Helvetica and since that font carries mad clout complaints will be appropriately ignored.

OK, I’m off to read more about this, starting here: http://support.microsoft.com/kb/282187

Update #1

Just read it.  A very intriguing quote from that page: “It is not a font but a face name for a nonexistent font.”  What?  Its definitely a font and after testing all of the usual suspects, I’m still unsure which one. Bizarre.

Update #2

I found the answer on this page: http://msdn.microsoft.com/en-us/library/dd374112%28VS.85%29.aspx.  The font that MS Shell Dlg maps to on all versions of Windows since Windows 2000 is “Microsoft Sans Serif”.  But I’m guessing that using MS Shell Dlg in the CSS rule instead makes more sense since it will map properly on other versions of Windows, and since its a shorter rule.  Though, specifying “Microsoft Sans Serif” explicitly, followed by more common fonts would make for a better rule and ensure no further surprises.

All this said, I’m still not sure why tadalist.com’s input fields are rendering in this font.

Update #3

Since writing this post, I’m noticing this font substitution taking place more often.  For example, Twitter‘s login input fields behave the same way, as does the h2 tag on Dictionary.com.  What all of these have in common is that they specify the first font name in quotes (presumably since it contains multiple words) and it happens to be a font that I don’t have installed.  While quotes should be permitted in such cases and are even encouraged by some, I find that its not necessary and here appears to not have the intended effect.

SWFUpload Doesn't Work with Windows 7

posted by admin in Flash, JavaScript

Uploading files using a browser has never been ideal, partly since JavaScript and/or HTML do not have the privilege to read size of files on the local file system which stands in the way of calculating upload progress and informing the user with a standard progress bar. To get around this, you can use a Java applet, one of the many hacks which involve Perl, PHP/CLI, or the awesome and very customizable SWFUpload. However, as a new Windows 7 user, I discovered that SWFUpload immediately reports 100% completion and the progress reporting fails. I’m guessing the problem is related to Windows 7′s restrictive nature and a new restrictions on flash plugin’s access to the file system, but hopefully the problem is solvable.

In the meantime, its assuring that the uploads using SWFUpload do work, only the reporting part doesn’t, but that’s the whole reason for using it. The problem was reported on the SWFUpload forum and hopefully its being looked into.

Live XML Editor

posted by admin in JavaScript, jQuery, PHP, XML

While I don’t recommend editing XML files by hand, its not an uncommon task and I occasionally find myself having to do it.  As I am a big advocate of web based applications, I was hoping to find a web based XML editor but had trouble finding one.  So I built one.

From the technical point of view, editing the XML directly (rather than translating it to a more edit-friendly format, then converting it back) was something I wanted to explore and jQuery’s fantastic DOM support (which covers XML files as well) seemed to be the right approach.  All of the editing is handled in the browser and each update is reflected in the source XML immediately.  Saving merely consists of pushing the string onto a PHP script which saves the file.

The interface is still a little clunky and could use some visual and functional improvements, but it should get the job done for now.  I’m also planning a number of feature updates.

Let me know how you like.

Go to the Live XML Editor »

jQuery's .live(), Enhanced

posted by admin in JavaScript, jQuery

If you’re not using jQuery’s .live() method you are really missing out. live() works by storing a selector-to-handler mapping in an internal hash which allows it to execute the handler for all existing and future elements which match that selector. This is a fantastic feature, however the current implementation relies on real DOM elements (even if they’re not appended to the document) for access to the selector which slows it down when it really doesn’t need to.

Wouldn’t it be great if it could just store the reference (the “selector”), which would make assigning handlers a constant complexity operation? Its certainly possible, and thanks to Dave Furfero (of blurf.furf.com) you don’t have to wait for a future release of jQuery to use this. (Lets hope they include it.)

Read all about it here:http://blurf.furf.com/2009/09/jquery-live-from-new-york/

Here’s the code:

$.extend({
	live: function(selector, type, fn){
		var jQElem = $(document);
		jQElem.selector = selector;
		jQElem.live(type, fn);
	}
});

Thanks Furf.

How to Get or Set Text Value of an XML Node in JavaScript Using jQuery

posted by admin in JavaScript, jQuery, XML

Edited on October 7th: I realized after the original post that the code provided was not entirely correct.  Specifically, it ignored CDATA values.  Methods below have been updated to reflect that fix.

The logic for extracting the text values is extracted into a separate function:

function getTextNodes(node){
  return $(node).contents().filter(function(){
    return (
      ((this.nodeName=="#text" && this.nodeType=="3") || this.nodeType=="4") // text node, or CDATA node
      && ($.trim(this.nodeValue.replace("\n","")) !== "") // not empty
    );
  });
}

This method first gets the contents of the node (all children, including child nodes, text nodes, comments), and then filters it down to only what it promises to deliver.  It ignores text nodes which contain only blanks, only newlines, or some combination of only those two.

Then, the set/get functions become:

function getNodeValue(node){
   var $textNodes = getTextNodes(node);
       textValue = ($textNodes[0]) ? $.trim($textNodes[0].textContent) : "";
   return textValue;
}

And since we’re at it, here’s a way to set it:

function setNodeValue(node, value){
   var $textNodes = getTextNodes(node);
   if ($textNodes.get(0)) $textNodes.get(0).nodeValue = value;
   else node["textContent"] = value;
}

One other change to note (bolded above, in setNodeValue()) is that if a specific node has no prior text value, instead of setting it using node.textContent, we’re setting it with node["textContent"] since Internet Explorer doesn’t like the first method (property doesn’t exist when blank).  This is good practice since its generally safer.

Converting an XML DOM Object to a String Using JavaScript

posted by admin in browsers, JavaScript

This is actually very simple, but it took a bit to discover so I’m posting it to address that.

function getXmlAsString(xmlDomObj){
   return (typeof XMLSerializer!=="undefined") ?
      (new XMLSerializer()).serializeToString(xmlDomObj) :
      xmlDomObj.xml;
}

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(){};
      }
   }
})();

Read Post »

Firefox 3.5 Issues: Dark JPGs, XML parsing with JavaScript, etc.

posted by admin in Firebug, Firefox, JavaScript

I downloaded Firefox 3.5 last week and while I did notice a slight performance improvement, there are a few unexpected updates as well:

  • Photos look much darker in 3.5 since it uses the embedded ICC profile where other versions/browsers don’t.  Whether or not you think this the more correct method of displaying images, its a bug and has been acknowledged as such (https://bugzilla.mozilla.org/show_bug.cgi?id=488800).
  • Firefox 3.5 seems more forgiving when processing XML with JavaScript.  Again, I’m going to test this more but it appears that no longer interprets empty text as a separate node.
  • Firefox 3.5 compatible version of Firebug is nearly useless.  Though, it is only in Beta and appears to be getting almost daily updates.

Weird.

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