IE7 overflow: hidden is broken

2012.04.06 | Web Development | , , ,

If you’re having problems with overflow:hidden in IE7 or IE6, make sure you apply position:relative to the element, or overflow:hidden is ignored.

Client Side Javascript Error Logging

2012.04.04 | Javascript, Web Development | , , ,

Karl Seguin just published a great short article on the why and how to log client side Javascript errors.  Read it here with some HN discussion here.

Update: Consider using Google Analytics to log Javascript errors.

Debug Node.js apps with node-inspector

2012.03.31 | Javascript | , , , ,

If you’re writing code for Node.js, node-inspector is a must-have, and is far superior to Node.js’s built in debugger.  What you get by using it is a Javascript debugging tool nearly identical to Chrome’s Javascript debugger, but for your Node app.

To install it, just use npm:

$ npm install -g node-inspector

Since you’ll be connecting to node-inspector via your browser, you’ll need to spool up the node-inspector server as so:

$ node-inspector &

Finally, run your app in –debug mode:

$ node --debug app.js

Connect to http://127.0.0.1:8080/debug?port=5858 and you’re good to go!

This setup description and more info can be found in the README.

Safari 5.0.5 won’t play HTML5 video

2012.03.30 | HTML5, Video, Web Development | ,

Trying to play HTML5 video in Safari but getting a blank video screen?  Possibly with 0:00 second video length?

I posted the solution over on SO but basically this head scratcher can be solved by using a full URL for the <video>’s src attribute.  If you don’t, Safari doesn’t even try to fetch the video.

I think this bug is only present in very specific versions of Safari (possibly just 5.0.5).

filesystem: /etc/mtab exists in filesystem & initscripts: /etc/profile.d/locale.sh exists in filesystem

2012.03.17 | Linux | ,

Using Arch Linux and getting the following error in pacman?

error: failed to commit transaction (conflicting files)
filesystem: /etc/mtab exists in filesystem
initscripts: /etc/profile.d/locale.sh exists in filesystem
Errors occurred, no packages were upgraded.

There’s actually two problems here.

First, delete /etc/profile.d/local.sh.  See here.

The second issue can be resolved by passing ‘–force’ into pacman.  See here.

“Object #has no method ‘isXDomain’”

2012.03.11 | Javascript | , , , ,

If you’re using Socket.IO with NodeJS, Firefox reports the error “this.isXDomain is not a function” while Chrome complains with ”Object #<Object> has no method ‘isXDomain‘”.

The solution to this problem has nothing to do with Cross Domain policies, it just happens to be the first place the Socket.IO script fails when you forget to create the socket with the ‘new’ keyword.

So change your code that looks like this:

this.socket = io.Socket('localhost', {port: 8888} );

to

this.socket = new io.Socket('localhost', {port: 8888} );

SCRIPT438: Object doesn’t support property or method ‘bind’

2012.03.08 | Javascript, Web Development | , , , ,

The problem: Internet Explorer 8 and below don’t support the ‘bind’ method (not to be confused with jQuery’s .bind()).

To fix, simply add the .bind method to the Function prototype.  Instructions to do that can be found here.


if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
 if (typeof this !== "function") {
 // closest thing possible to the ECMAScript 5 internal IsCallable function
 throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
 }

var aArgs = Array.prototype.slice.call(arguments, 1),
 fToBind = this,
 fNOP = function () {},
 fBound = function () {
 return fToBind.apply(this instanceof fNOP
 ? this
 : oThis || window,
 aArgs.concat(Array.prototype.slice.call(arguments)));
 };

fNOP.prototype = this.prototype;
 fBound.prototype = new fNOP();

return fBound;
 };
}

jQuery function to iterate and sum over a selection of elements

2012.02.26 | Javascript | , , ,

I thought this was kind of clever so I’m posting it here.  Basically what we want to do is sum the widths of a bunch of elements with a certain class name.  Here’s the code:

var totalWidth = $('.class-name').toArray().reduce(
  function(a,b) { return a + $(b).width() },
0);

Read up on Javascript’s reduce functionality if you’re unfamiliar, as it is something many languages have and is quite useful.

The “.width()” function is just an example (so in this case it would sum the widths of all .class-name elements).

Ruby on Rails unit test: cannot find table error

2012.01.18 | Rails, Ruby | ,

If your Ruby on Rails unit tests complain about not being able to find a table after you’ve added a new model, it just means you forgot to prepare the test database with the latest data.  The error looks like this:

ActiveRecord::StatementInvalid: Could not find table ‘yourtablenamehere’

To fix, just run:

rake db:test:prepare

and then re-run your test.

Git: Remove all deleted files from git repository

2012.01.17 | Version Control | ,

Let’s say you’ve deleted some files that are being tracked in git, and you want to remove them entirely from git.  Find the solution here.