Category Archives: jquery

browserify, jquery, and jquery plugins

i’ve been playing around with browserify and i’m still debating whether or not it’s really the next big thing for me. complicating my development with a build process needs to buy me something that i really want. the whole concept of browserify is to be able use commonjs modules in the browser by bundling all of your dependencies together. what does that really mean? it means that your server side and client side code can look very, very similar. in fact, you can even use the same node modules that you used on the back end in the front end.

this lets you write code that looks like:

to be able to work out all of the dependencies that your javascript has, a grunt task is introduced to scan through your javascript and include all of the dependencies found within your “require”d code.

that spoke to me quite a bit because i liked the fact that my front and back end code now looked very similar. but then i ran into a hiccup. what about jquery? it turns out that jquery works reasonably well if you just require it, but where i got stuck for a while is what if you wanted to use a jquery plugin?

i’m not completely sure that this is the right way to do it, but it works:

what’s different? binding $ and jQuery into global scope seems to be the key here. and actually, all you really need is window.jQuery, but I like having $ in global scope so i throw that in. but the question is why does this work?

if you look at any jquery plugin boilerplate, what it looks like is:

the plugin is expecting to find the jQuery object in global scope. usually, when jquery is included in the page, this happens automatically, but because of the way that jQuery is loaded via browserify, this isn’t happening. so the above hack just inserts it into global scope so that the plugin can find what it wants to then define itself.

it all seems to make sense, but it feels like there’s got to be a better way to do it. i just can’t figure out what that better way is. but i can’t get over the fact that it feels dirty to me that i need to write additional code just because i’m using browserify. it just feels like i’m doing something wrong here.

Fuzzy timestamps

I never thought about it until now, but the concept of fuzzy timestamps is a little more complex than it appears at first blush. How hard is it to make a timestamp fuzzy?


a minute ago
1 minute ago
2 minutes ago
an hour ago
about an hour ago
1 hour ago
5 hours ago
and so on...

The question is which convention do you stick to for each measure of time? Minutes, hours, days, weeks, months, years all could have their own unique phrases. And once you settle on figuring out what the convention is that you want to pick, the next, bigger challenge, is how do you support l10n?

Some languages have sentence structures that are different from English so you need to be flexible enough to be able to hopefully support that.

It turns out that there’s a jQuery plugin that has taken a pretty good stab at it called smart-time-ago which is an optimized fork of timeago.

What makes this sort of cool is that the presentation of your fuzzy timestamp is delegated to the browser so the server is agnostic of all of these variations…at least, I think it’s cool. Maybe some back end developers would prefer that all of this presentation logic is kept at the server.

Either way, this project is a good starting point for those who want to tackle on the challenge of presenting fuzzy timestamps. I’m not sure if I completely agree with all of the units of time that the plugin presents, but it gives you a good start to where you want to go.