Sunday, August 18, 2013

Browser developer tool

Built-in browser developer tool really helps Web development, the all-in-one development environment is getting better and better from desktop browsers.

Chrome: This is my favorite
Firefox: Firebug extension, but I think Firefox 23 built-in tool is cool and promising
Opera: Dragonfly, very clear and easy of use
Safari: Xcode style, hard to use. I seldom use it unless I need debug iOS safari (mobile web remote debug)
IE9: F12. So hard to use, but IE11 is getting much better based on .NET magazine. Hope it will catch up Chrome/Firefox.

Usually the features available from these browser developer tools are similar, and they should Element inspector, Style box model, Resource browser, network activity, Performance, profile, Console etc.

Here are some tips I just learned or I don't use frequently:
  • Don't forget right click in developer tool - the contextmenu has some surprises
  • Debugging Minified JavaScript
  • Emulate a User Agent
  • Checking DOMContentLoad and Load Event
  • Incrementing CSS Values - Simply use the up and down cursor keys to increment/decrement by a unit of 1.
  • console.log() for outputting debug info, will work printf style. like console.log("The flower is %s.", "red")
  • console.assert() can be used to test whether expressions are true or false.
  • console.table() can be used to output data from an array of arrays or a list of objects in a sortable, tabular format.
  • You can automatically create a breakpoint in your code by adding the following line to your JavaScript: debugger;



Tuesday, August 13, 2013

Versioning main.js in requirejs

<script>
        var require = {
            // https://github.com/jrburke/requirejs/issues/476
              paths: {
                'main': 'main.js?v=MD5_MAIN'
              }
        };
</script>
<script data-main="js/main" src="js/lib/require/require-2.1.5.min.js"></script>

This is one way, and need make sure require config is before require.js script tag.

Another way mentioned in the issue by requirejs author jrburke is using directory. This is a better way than querystring.
<script data-main="v1/js/main" src="v1/js/require.js"></script>

Thursday, August 1, 2013

Flash acoustic echo cancellation

Acoustic echo cancellation (AEC) is required for voice-over-IP (VoIP) applications to provide headset-free talk. AEC is available in messenger applications (such as Skype and Google Talk) and softphones (such as Xlite).

In Flash, to use acoustic echo cancellation, call the Microphone.getEnhancedMicrophone() method to get a reference to a Microphone instance. Set Microphone.enhancedOptions to an instance of the MicrophoneEnhancedOptions class to configure settings. When AEC is not supported, Microphone.getEnhancedMicrophone() returns null.

Here are sample codes:
var mic:Microphone = Microphone.getEnhancedMicrophone();
var options:MicrophoneEnhancedOptions = new MicrophoneEnhancedOptions();
options.mode = MicrophoneEnhancedMode.FULL_DUPLEX;
options.echoPath = 128;
options.nonLinearProcessing = true;
mic.enhancedOptions = options;
There are two other settings similar but not exactly for acoustic echo cancellation.
  1. setUseEchoSuppression - this method can reduce, but not eliminate, the risk of feedback amplification. When enhanced audio is used, this echo suppression functionality is ignored.
  2. noiseSuppressionLevel - Maximum attenuation of the noise in dB (negative number) used for Speex encoder. If enabled, noise suppression is applied to sound captured from Microphone before Speex compression. Set to 0 to disable noise suppression. Noise suppression is enabled by default with maximum attenuation of -30 dB. Ignored when Nellymoser codec is selected.
References:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/package-detail.html
http://www.adobe.com/devnet/flashplayer/articles/acoustic-echo-cancellation.html