Friday, January 28, 2011

Regex beats For loop for JavaScript search and replace

Here's an interesting test Rob and I did today at i.tv trying to figure out the best way to replace html entities (&) with their equivalent (&). We were hoping to basically replace the html_entity_decode function in php, but we're only worried about a limited subset of characters.

The basic approach is something like this:
str = str.replace(/&/g, '&');

There was something I found on stack overflow about this that is kind of start:
http://stackoverflow.com/questions/784586/convert-special-characters-to-html-in-javascript

We needed to do many search and replaces and compared two methods. Loop through a list of characters and replace them individually or use a big regular expression and do only one match. I wasn't sure what would be best, but from the results clearly the regex wins.

Code:

Results (Safari 5 on top, Firefox 3.6 to the right, and Chrome 8 on the bottom):



Hopefully the timing comparison demonstrates how much faster the regex is over a normal loop! Oh and Firefox 3.6 hates this test, but Chrome really rocks it.

Final solution:
var htmlEntityDecode (function({
  var specialChars {
      "&":"&",
      "
&eacute":"é",
      "©":"©",
      "ñ":"ñ",
      "æ":"æ",
      "Æ":"Æ",
      "¿":"¿",
      "£":"£",
      "¢":"¢",
      "®":"®"
    }
    inside Object.keys(specialChars).join("|"),
    regex =  new RegExp(inside'g');
    
  return function(str{
    return str.replace(regexfunction(html{
      return specialChars[html];
    });
  }
})();
  

Update: it looks like someone else also came up with a similar answer:

Thursday, January 27, 2011

Things to Learn #2

Jake
ExpressJS
Node
MongoDB
MustacheJS
UnderscoreJS
IE 5.5 JS/CSS Support (???)
Writing tests for node

MongoDB Explorer

Hey!

I recently started here at i.tv and began using MongoDB extensively. I realized pretty quickly I'd need to get some new tools for exploring the database. While the JavaScript interface is fantastic, sometimes you just want to browse through and see what's there. Sequel Pro did a great at this for MySQL databases. SDB Explorer works alright for exploring Amazon's SimpleDB, but I couldn't find anything at first for Mongo. Finally I found this experimental project, which does well enough at poking around your Mongo collections. It's Mac Only and called Mongo Explorer:
https://github.com/francois/mongo_explorer

There's another one out there called MongoHub, that's also Mac only. It's supposed to be alright as well:
https://github.com/bububa/MongoHub-Mac

Edit:

After playing with both for a few minutes. Mongo Explorer seems much easier to use if you just want to go in and look at the data. Mongo Hub is much fancier, prettier and seemingly more complicated / powerful.

Best of luck to all the new Mongo users out there, so far it's really cool!

Friday, January 14, 2011

Uploadify, CakePHP and Suhosin Woes

Flash uploaders have a notorious problem maintaining sessions. CakePHP doesn't have any built in way to solve this problem, so here are some notes about how I dealt with it. To make matters worse I also had HTTP Basic Authentication and the Suhosin PHP security module enabled, which added additional layers of complication. Hopefully the last day and half of my working life will make your lives easier.

Here are the 3 steps I had to take to enable Uploadify on a site I was working on.

1. Follow the instructions about restarting your session in CakePHP while using Uploadify here:
http://blogs.bigfish.tv/adam/2008/04/01/cakephp-12-sessions-and-swfupload/


2. Disable HTTP Basic Authentication. I know there are several possible solutions, but in my case I still have not figured out how to enable authentication on everything except for the file upload service, so for now we've disabled authentication site wide. Will post if I can come up with something better.

3. If your server has Suhosin (PHP security module) installed, you will need to perform this extra step.

Edit your config file, in my case it is /etc/php5/apache2/conf.d/suhosin.ini. And set these to variables to off.

suhosin.session.cryptua = off
suhosin.cookie.cryptua = off

In my case that meant changing them from this state (commented out showing defaults):

;suhosin.session.cryptua = on
;suhosin.cookie.cryptua = on

Wednesday, January 12, 2011

PBCopy - Command Line Copy and Paste

A recent tweet by @ryanflorence reminded me an under-used Mac OS X terminal command. "pbcopy". pbcopy copies input into the clipboard like so:

Copy my ssh key without screwing it up:
cat ~/.ssh/id_rsa.pub | pbcopy

It's really great. I highly recommend it.

Saturday, January 8, 2011

Browser Statistics For 2010

Intrigued by the charts I saw here about over 50% of web users now having support for HTML5 Video I wanted to dig in a little bit deeper myself:
http://videojs.com/2011/01/html5-video-statistics/

The first thing I did was look at mobile browsing in the entire world and found that Symbian by Nokia is easily the largest device:
http://gs.statcounter.com/#mobile_os-ww-daily-20100101-20101231

After focusing on only US statistics however, which makes sense for most of the brands I work with at Rain, as expected Blackberry, iOS and Android were all looking pretty competitive by the end of the year with iOS at 37%, Android at 27% and Blackberry at 26%:
http://gs.statcounter.com/#mobile_os-US-daily-20100101-20101231

As a mobile developer it's really important to focus my energy and time on the browsers that people are actually using. As much as its a feel good to support Opera Mini, Palm and others, it may not be very a practical use of time and money. Unfortunately for us though, BlackBerry is a little bit of an unknown. While BlackBerry 6 includes a cutting edge web browser, older versions offer very little support for the latest standards. To make matters worse their emulator has historically only run on a PC. Thankfully frameworks like JQuery Mobile have gone out of their way to accomodate BlackBerry. Hopefully that will be enough to support it until BlackBerry 6 adoption becomes the norm. On one of the mobile-web mailing lists I follow much discussion goes on about supporting even much older and less capable devices than the BlackBerry. Clearly in the United States that doesn't seem like a good use of time.

Moving on to desktop browser statistics I was shocked to see IE7 adoption rates dropping below where Firefox is by the end of the year. Thank goodness for that:
http://gs.statcounter.com/#browser_version-US-daily-20100101-20101231

Here's an even clearer message (IE (all versions) ends the year with 48% total usage in the US):
http://gs.statcounter.com/#browser-US-daily-20100101-20101231

Here is another interesting statistic, mobile vs. desktop. It's my opinion that this trend will only continue to grow until we see desktop eventually down to under 66%:
http://gs.statcounter.com/#mobile_vs_desktop-US-daily-20100101-20101231

It's been an exciting year for browser growth, both in mobile and in the desktop realm. HTML5 has hurled itself to the forefront of browser innovation and this year IE9 promises to add mainstream support for some of the most exciting technologies out there. Right now it's a good time to be a web developer. In 2011 web developers can start applying HTML5 technologies without a lot of worry about supporting older browsers, because looking at the statistics people just aren't using them anymore!

Thursday, January 6, 2011

NodeJS Mobile Web App

Finally, thanks to Joyent's sweet SmartMachine service I'm able to show off my silly HTML5 mobile web app for collaborative painting. Works best on iPhone, but also works on Android and desktop browsers. It's a fun example of using web-sockets, node.js and canvas! Check it out now!

http://xjamundx.no.de:8080