javascript

...now browsing by category

 

Updating a PHP, MySQL, and Javascript Site to Support Foreign Languages with UTF-8

Saturday, May 17th, 2014

Recently on SourceAudio we decided to make supporting foreign languages a priority. We’d always supported html encoded foreign language characters but clients found that extremely clumsy and had no desire to learn that arcane syntax, for which I couldn’t blame them. The solution was to start supporting them properly, which meant switching out character encoding across all layers of the site. After some deliberation, we decided to go with UTF-8, since that would get us all the characters we needed and seemed to have the widest support.

If you’re not familiar with character encoding, Joel Spolsky gives a good overview here. Basically, we needed to support characters like õôóõêç and 测试 in addition to the traditional English characters.

With that decided, it was time to start working on the layers. First up, we needed our backend data to be stored in UTF-8 and that meant updating MySQL.

Click to continue »

IE9 User Agent in HTTP Requests vs navigator.userAgent

Wednesday, June 6th, 2012

While tring to figure out why file uploads weren’t working in IE9 on SourceAudio, I discovered an interesting quirk: IE9’s user agent as reported by navigator.userAgent isn’t necessarily the same as the user agent that it sends in for http requests.

Apparently this is intended and understood behavior but it was the first I’d heard of it.

To summarize, MS found that as programs and add-ons added “feature tokens” to your user agent string, the length of the string would become so long that some servers would throw a fit. To prevent the issue, IE9 stopped adding these feature tokens when they send the user agent to the server, so instead of sending

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)

You just send in

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)

However when accessing the user agent through javascript, you get the whole thing.

So why does that matter?

Click to continue »

Javascript prototype functions and performance

Friday, September 2nd, 2011

Apparently I decided to spend my Friday night profiling javascript and I figured I might as well share a couple performance differences I discovered where I wasn’t expecting them.

Click to continue »

The Problem with document.location.hash

Monday, May 10th, 2010

SourceAudio, like a lot of ajax heavy applications, uses the hash to store state information. For example, when you search, you might end up on a url like http://www.sourceaudio.com/#explorer?s=search+terms&pg=1

The “page” is the “explorer” and the parameters are after the question mark. There are a number of ways you can format your hash but using the standard url format has been a pretty good solution for us. At least until today.

Click to continue »

jQuery document.body is null error

Wednesday, September 23rd, 2009

I had a little “fun” with jQuery where it was giving me a “document.body is null” error…or sometimes it wouldn’t say anything but would just quietly fail. After some investigating, I made an interesting discovery about jQuery’s data() function.

I was chaining calls to data, like
myObject.data('foo', foo).data('bar', bar);

which generally works fine but apparently if foo is undefined, an error is thrown and the whole thing dies. If bar is undefined, it’s no problem, but something about trying to call data() with an undefined value breaks jQuery’s ability to make any further chained calls to that element.

The easiest solution I found is just dropping in a little
if (!foo) foo = null;
myObject.data('foo', foo).data('bar', bar);

And then everything works!

Javascript Copy to Clipboard Follow-Up

Tuesday, July 21st, 2009

While testing a site using the previously recommended ZeroClipboard in IE6, I noticed it was throwing occassional errors I believe are related to IE saying Flash objects are available before they actually are, or before they’ve registered their ExternalInterface functions with Javascript. Anyway, I tried changing the ZeroClipboard js file to make sure all Flash functions were registered before trying to use them which got rid of the errors, but IE6 still didn’t actually copy anything to the clipboard when hitting the button.

Rather than try to fix that, I took advantage of IE’s built in clipboard manipulation object, window.clipboardData and ended up with this:

if ($.browser.msie) {
  $('#clickme').click(function() { 
    if (window.clipboardData.setData('Text', $(this).data('copyText'))) {
      postCopyFunction(); // only happens if user allows copy
    }
  }).data('copyText', 'text to copy');
} else {
  var clip = new ZeroClipboard.Client();
  clip.setHandCursor(true);
  clip.addEventListener('complete', postCopyFunction);
  clip.setText(url);
  clip.glue('clickme');
}

Works about the same except in IE you get a confirmation about whether you want to allow access to the clipboard, which is acceptable. Arguably works better in IE now that it does in other browsers because you’re not loading a Flash widget.

Just a heads up if you want to use ZeroClipboard for a project.

Javascript Copy to Clipboard

Friday, July 17th, 2009

I was working a project recently that required being able to copy something to the clipboard using javascript in a browser compatible way. After much searching and trying different solutions, I found one called Zero Clipboard that works perfectly.

http://code.google.com/p/zeroclipboard/

Since there is no universal way to change the clipboard in javascript, the commonly accepted solution is to use a Flash movie to do the actual copying. You used to be able to make that completely transparent the to the user and just use Flash in the background but in Flash 10, Adobe changed Flash security so clipboard altering events had to be initiated by actually clicking somewhere in the Flash movie.

http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html

Obnoxiously, they changed file uploading in the same way, but I digress.

Zero Clipboard addresses all these issues by letting javascript create a transparent Flash movie, exactly covering any element in the DOM, and then letting that movie intercept button presses and initiate a copy command. The user can see you’ve used Flash by right clicking on the button/movie beyond that, it’s invisible to the user.

If you’re ever trying to do copy to clipboard in javascript, I highly recommend it. Very easy, very functional.