Skip navigation

npm is the package manager for Node.js. As of today, there areĀ 77,588 modules registered with npm. That there lies the problem.

Anybody can create an account and publish a Node module to npm. There’s no quality control. Half of them are crap or have been abandoned. I expect there to be even more abandoned modules once Node.js 0.12 is released and authors don’t bother to update their native modules to the new V8 interface.

Finding new modules is a pain. There are a couple of npm search sites including npm’s own site, but these search engines suck.

For example, I was recently looking for a Node module that incorporates Hogan.js into Express. Simple right? When I search “hogan express”, the first hit is express. Well that’s half right. The second hit is the hogan-express module which is exactly what I’m looking for. However if I continue to scroll down the results I see hogan-engine, hogan-middleware, express-hogan, and hjs. Ugh. I smell crap.

On a side tangent, it’s a huge annoyance that package names are first come, first serve. If I create an “express4″ module, I bet it wouldn’t be long before the world gets confused and tries to download it. Case in point, there’s a module named express-hogan and another named express-hogan.js. WTF? There needs to be some name cops that prevents this shit.

So, now I have 5 modules that I need to research to see which ones suck and which ones suck the least. A quick look at each module and I can see the following:

hogan-express hogan-engine hogan-middleware express-hogan hjs
Version: 0.5.2 0.9.2 0.0.1 0.0.5 0.0.6
Last Updated: 5 months ago a year ago a year ago 9 months ago 9 months ago
Stars: 5 0 0 0 0
Dependents: 11 0 0 0 14
Downloads: 24,891 1,069 548 86 49,994

Note: I had to go to npm-stat to get the download numbers.

It came down to hogan-express vs hjs. I ended up using hogan-express for my Express app because it had support out-of-the-box for layouts and partials. It also helped that hogan-express was always one of the first results. It’s pretty easy to use once you figure out how to use it. The examples in the docs are written CoffeeScript which only complicates my already overworked brain.

So, what about other npm search sites?

https://nodejsmodules.org/ just lists the usual suspects. I have no idea what criteria they use to determine which modules are interesting. This site is basically useless.

http://node-modules.com/ is just a keyword search engine. I tried searching for “hogan express” and it wasn’t until the 3rd result did it return “hogan-express”. The next couple results seemed relevant. One thing that bugs me is the stupid package name links to the module’s Github page instead of the npm page. One more step I need to do to find the stats about the module. Ugh.

http://npmsearch.com/ is the most worthless of the bunch. I searched “hogan express” and the first Hogan.js+Express module was the 59th result! WTF??? Even specifying “hogan-express” didn’t yield any results. I wouldn’t waste my time with this site.

In the end, npm’s site provides the best search even though it’s not perfect. I wish there was a rating system. The star system is not enough. I want to know how many forks does the module have? How many issues does it have? Has the module been abandoned? The search index should index not only the module name, description, and keywords, but also the main readme.

Just sayin.

Codestrong 2012 is over and my talk was awesome. As the masses flocked to the grand ballroom to hear me talk, I kindly played some Slipknot, Slayer, Helmet, and All That Remains for the crowd. They were ready to rock and so was I.

In my talk, I unveiled the Titanium CLI’s various commands and features. It was spectacular.

After 30 minutes of babbling, I switched gears to the command line for a live demo. I cut straight downloading and installing the CLI. That went smooth. Created a project and built it for iOS Simulator. No problems.

Then things went downhill. I switched to Titanium Studio to do a build using the old Python build scripts, but nothing happened. I’m talking no output, no errors, no nothing. I quickly gave up and resorted to manually running a build using the old Python build scripts and it throw a ton of errors. Ugh.

Later I found out that I just happened to stumble upon a bug in Studio with trying to compile Titanium apps created by the new CLI and imported into Studio.

I then tried to find redemption in demoing the command plugins. In my haste, I accidentally referred to the plugin as version 0.1 instead of 1.0. No wonder it didn’t work.

Overall, not a single person said my talk sucked, so that’s pretty rad. People loved the prompt validation and the plugin system. They desperately want auto-completion and so do I.

Without further ado, I present my slides from my presentation:

Next week is Open Source Bridge 2012 in Portland, OR. I’ll be there hacking, networking, and drinking beers.

The talks look decent this year: http://opensourcebridge.org/events/2012/schedule.

I’m most interested in the node.js and mobile-related talks. There’s a couple others that seem interesting too such as the “What’s my kernel doing?” talk. There’s some time slots that are duds, but this will give me an opportunity to hack and recruit for Appcelerator.

The last day is the unconf day and I’m thinking about giving a talk on Titanium. I don’t really have anything prepared, but it would be cool to show off what it can do.

If you’re in Portland next week, ping me on Twitter: http://twitter.com/cb1kenobi.

Say you have a string and you need to see if it’s in a set of valid strings.

The naive approach may be to do an Array with an indexOf().

The old school way would be to using a String and indexOf().

I have been a fan of regular expressions for the past year. The key here is to cache the regex if it’s going to be used more than once, especially if in a loop.

But then I wanted to know if there was a better way. I wrote up a quick test page on jsperf.com and discovered the following results:

Chrome Firefox Safari Opera
array 17 9 8 5
string 10 18 11 10
regex 24 16 38 49

 

Those values are approximate millions of operations per second. Just as I thought, the regex technique is the fastest.

I started to think what about using an object?

First up, the “in” operator:

I re-ran the tests and found:

Chrome Firefox Safari Opera
array 17 9 8 5
string 10 18 11 10
regex 24 16 38 49
in object 14 39 37 20

 

Not much better. Firefox seemed to be pretty good, but Chrome and Opera sucked worse than the regex method.

Then I tested hasOwnProperty():

I re-ran the tests and found:

Chrome Firefox Safari Opera
array 17 9 8 5
string 10 18 11 10
regex 24 16 38 49
in object 14 39 37 20
hasOwnProperty() 19 29 43 26

 

Also crap. How about the good old [ ]?

I re-ran the tests again:

Chrome Firefox Safari Opera
array 17 9 8 5
string 10 18 11 10
regex 24 16 38 49
in object 14 39 37 20
hasOwnProperty() 19 29 43 26
[ ] 774 619 60 211

 

BINGO! We have a winner… by a landslide.

So, what did we learn? Create the object one time with values of 1 (less bytes, simple data type), then use [ ] to see if the value is truthy.

The only caveat is that you can’t test certain strings that are internal properties of Objects like “constructor”, “toString”, “hasOwnProperty”, and so on. If you need to test those strings, then maybe the regex way is a good solution.

Check out the tests for yourself: http://jsperf.com/regex-vs-indexof-vs-in

If you had to guess, what is the “typeof undefined” in JavaScript? It took me nearly a half day to unravel this mystery.

OK, that seems pretty logical. The typeof undefined is undefined. We can verify this by calling the toString() call directly from the Object prototype.

But, what happens if you run this same test on a mobile webkit-based browser such as Mobile Safari or Android’s browser?

Starts out good. Typeof undefined is undefined. But if you do a toString() on undefined, it returns “[object DOMWindow]“. Huh?

That’s right, Object.prototype.toString.call(undefined) == Object.prototype.toString.call(window). What the fuck?

This seems to only be an issue on mobile webkit-based browsers including the latest Mobile Safari in iOS 6 beta.

Firefox, Safari, Chrome, and Opera for desktop and Chrome Beta for Android all correctly return “[object Undefined]“.

This year was my first JSConf. It was an incredible experience. The talks were great. Very technical, very informative, very though provoking.

The Good

The first day started out with what everyone thought was “fireworks” but ended up everyone receiving a free Samsung Nexus S smartphone with Mozilla’s Boot 2 Gecko (B2G) operating system pre-installed.

B2G is pretty sweet. It boots up crazy fast. Everything including the home screen, phone app, and web browser are just straight up JavaScript. This device has crazy potential.

I managed to get Titanium Mobile Web apps to be installable on the B2G home screen. When you launch your app, it detects if it’s installed and if not, prompts to be installed.

B2G is far from done. I ran into some problems with getting the home screen icons to show up. I also ran into problems trying to get the install manifest to load, but fixed it by specifying a full path.

Regardless of the issues, B2G is awesome and fast moving. Here’s some B2G links to bookmark:

As usual, Paul Irish’s talk about Web Developer Tools had some good info. Can’t wait for the new Chrome to come out with the dev tool enhancements.

I overheard some dudes talking about grunt and task.js, so those are worth checking out.

Had a interesting chat with James Burke about optimizing AMD builds. I think require.js has a better solution for caching modules than Dojo. I plan to adapt the solution for Titanium Mobile Web and hope it speeds things up a bit.

One of my favorite talks was by Jake Archibald about Application Cache. It was an excellent talk with excellent content. I can’t wait to watch his talk once the videos are up on blip.tv.

Appcelerator sponsored the hacker lounge. I tried to demo some stuff, but the demo gods were out to get me.

I ended up handing out all my stickers and business cards, so mission accomplished.

For more coverage, check out the notes and slide decks: http://lanyrd.com/2012/jsconf-us/coverage/.

The Bad

I made the mistake of trying to save a buck and stayed at the Days Inn. This hotel sucked. The pillows were horrible. The rooms where noisy. The water is either warm or hot, no cold water (I know, right?).

It didn’t help that the airport shuttles were from the Firesky hotel where the conference was held. Carrying your luggage a few blocks in Arizona sucks.

The Ugly

As I started working on this blog post in the Phoenix airport, I get a call that my Southwest flight has been cancelled less than 2 hours before I’m supposed to be in the air. What the hell?

I managed to get home safe and life goes on.

Conclusion

The people were great. The talks were great. The parties were great. Met a lot of people that I hope to stay in touch with and can’t wait until next year’s JSConf.

Look what just came in the mail today! Physically Based Rendering: From Theory to Implementation, second edition by Matt Pharr and Greg Humphreys. 1,167 pages and 5.2lbs of computer graphics theory. This bad boy is gonna take a while to get through.

I really love Morgan Kaufmann books. They are very well written and organized. All of the code examples are all in C++. The book is also printed in color, which kicks ass.

After years of web development, today is the first time I’ve been bit by the X-Frame-Options HTTP header. If you are like me, you’re wondering what the fuck X-Frame-Options is.

In short, if you try to load a cross-domain web page into an iframe that has X-Frame-Options in the headers, you’re screwed. It was invented by Microsoft in early 2009 to prevent Clickjacking. Nowadays, all modern browsers support it.

X-Frame-Options has two possible values to crush your dreams of loading a page in an iframe: SAMEORIGIN and DENY. Fear not, though, I’ve figured out what you already probably knew; we can solve this with a proxy server like nginx.

Assuming you figured out how to install nginx and fire it up, sprinkle this little nugget into your server definition:

Change the domain you’re trying to embed and change the location path as you see fit. Not only will this work, but you can access the contents of the page with JavaScript.

The trick is we remove the X-Frame-Options header and since we’re same domain, we can access the inside of the iframe.

The days of parsing user agents is over for me. Thanks to Dojo, I’m all about feature detection. Lots of good work has been done by has.js and Modernizr.

At Appcelerator, I’m working on the mobile web version of the Titanium Mobile platform. One of the first things I did was use these feature detection platforms to start capturing some data.

Without further ado, behold the Browser Feature Detector: http://detect.appcelerator.com/.

This is the first time I’ve publicly mentioned the Browser Feature Detector site, but I needed some blog content, so work with me.

You’re feel to view source. The code is thrown together, but hey, it gets the job done.

I recently added a View Results button that allows you to see various features per user agent. It would probably be infinitely more useful to search by feature, but I haven’t had time to add that yet.

I also just added some new tests for some neat APIs such as battery, vibrate, and web intents.

As of right now, I’ve manage to collect 415 user agents (a lot are dupes of the same browser) from 1,016 users.

In addition to has.js and Modernizer, I’d like to give thanks to The HTML5 Test and Respond.js for a few snippets.

As soon as I find time, I’ll throw the source up on GitHub, though you’re not missing much.

I love github.com. I use it everyday and couldn’t code without it, but there’s a couple things that would make my job easier.

Fluid Width

Constraining the width of the page to 920 pixels drives me crazy. I have a widescreen display and I’d like to use it.

To help out, I wrote a small Greasemonkey script for Firefox:

It only really works on code review pages. Directory listings and individual file pages can’t be widened without a bit of work thanks to the fancy transitions between pages. Maybe I’ll fix it someday to work on all pages.

Grep Project Files

I want a search box that will scan all files for a given revision for a specific string of characters. Bonus points if the search box supported regular expressions.

Delete a Branch/Tag

If I can edit and commit files in the browser, why can’t I delete a branch or tag?

Pull Request Tags

This is real low priority and probably stupid, but maybe it would be nice to have the ability to assign tags to pull requests (i.e. docs, tests, feature xyz). Then these tags could be referenced from the GitHub API. Seems like there just needs to be a better way to attach meta data to pull requests besides typing some sort of keyword in the pull request message.