Blogs » Andy Idsinga (Intel) http://software.intel.com/en-us/blogs Fri, 25 May 2012 22:49:19 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 Dynamically load javascript with load completion notification http://software.intel.com/en-us/blogs/2010/05/22/dynamically-load-javascript-with-load-completion-notification/ http://software.intel.com/en-us/blogs/2010/05/22/dynamically-load-javascript-with-load-completion-notification/#comments Sat, 22 May 2010 22:29:46 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2010/05/22/dynamically-load-javascript-with-load-completion-notification/ Here's a javascript function to dynamically load javascript into a page and get a notification (callback) when the script is done loading.

I used to use the good 'ol window.onload handler - but I've found that this way is better as the Web APIs we're building need to dynamically add scripts to the page that is embedding them and know when the script is done loading!

The main advantage :
This function loads the specified script and calls the javascript function you specify when the script has finished loading.
Your code can call this at any time during the life of your app - even based on user interaction! (see HTML test code below below).

This "lazy script loading" has other advantages:
- reducing the initial page / app load time
- allows for loading scripts based on user input / feature requirements

The add_script function 
    /* utility to add a script node to the current document
       and call the callback function when it is loaded.
       Should allow scripts to be loaded at any time during document
       life..and have code be kicked off after they are loaded.

       Browsers tested:
       FF 3.6.x     - WORKS
       Chrome 5.x   - WORKS
       Safari 4.x   - WORKS
       MS IE 8      - WORKS
       Opera 10.x   - WORKS
    */
    function add_script(scriptURL, onloadCB) {
      var scriptEl    = document.createElement("script");
      scriptEl.type   = "text/javascript";
      scriptEl.src    = scriptURL;

      function calltheCBcmn() {
        onloadCB(scriptURL);
      }

      if(typeof(scriptEl.addEventListener) != 'undefined') {
        /* The FF, Chrome, Safari, Opera way */
        scriptEl.addEventListener('load',calltheCBcmn,false);
      }
      else {
        /* The MS IE 8+ way (may work with others - I dunno)*/
        function handleIeState() {
          if(scriptEl.readyState == 'loaded'){
            calltheCBcmn(scriptURL);
          }
        }
        var ret = scriptEl.attachEvent('onreadystatechange',handleIeState);
      }
      document.getElementsByTagName("head")[0].appendChild(scriptEl);
    }


The HTML used to test loading two scripts based on user input 

<!DOCTYPE HTML>
<html>
  <head>
    <TITLE> Script load testing</TITLE>
  </head>
  <body> 

    <div id="control_area" style="width:100%;height:100%;border:solid red 1px">
      Select the script to load:
      <select id="script_selector" size="1">
        <option> ./gen_include2.js</option>
        <option> ./gen_include.js</option>
      </select>
      <ul>
        <li> <a href="javascript:void(0);" onclick="load_selected();"> Load selected script</a> </li>
      </ul>
    </div>
    <div id="output_area"
      style="position:relative;width:100%;height:200px;overflow:auto;
      border: dotted 1px #ff0000;">
    </div> 

    <script type="text/javascript"> 

    /* clear the scratch area */
    document.getElementById("output_area").value = "";

    function load_selected() {
      output_str("+load_selected");
      var ssel = document.getElementById("script_selector");
      var sselURL = ssel.options[parseInt(ssel.selectedIndex)].text;

      function myOnloadCB(loadedScriptURL) {
        output_str("myOnloadCB,script loaded: " + loadedScriptURL);
        if(typeof(window.gen_include_js) != 'undefined'){
          output_str("window.gen_include_js exists in DOM");
        }
        if(typeof(window.gen_include_js2) != 'undefined'){
          output_str("window.gen_include_js2 exists in DOM");
        }
      }
      add_script(sselURL, myOnloadCB);
    }

    /* utility to add a script node to the current document
       and call the callback function when it is loaded.
       Should allow scripts to be loaded at any time during document
       life..and have code be kicked off after they are loaded.

       Browsers tested:
       FF 3.6.x     - WORKS
       Chrome 5.x   - WORKS
       Safari 4.x   - WORKS
       MS IE 8      - WORKS
       Opera 10.x   - WORKS
    */
    function add_script(scriptURL, onloadCB) {
      output_str("+add_script");
      var scriptEl    = document.createElement("script");
      scriptEl.type   = "text/javascript";
      scriptEl.src    = scriptURL;

      function calltheCBcmn() {
        onloadCB(scriptURL);
      }

      if(typeof(scriptEl.addEventListener) != 'undefined') {
        /* FF, Chrome, Safari way */
        scriptEl.addEventListener('load',calltheCBcmn,false);
      }
      else {
        /* MS IE way */
        function handleIeState() {
          output_str("+handleIeState,scriptEl.readyState=" + scriptEl.readyState);
          if(scriptEl.readyState == 'loaded'){
            calltheCBcmn(scriptURL);
          }
        }
        var ret = scriptEl.attachEvent('onreadystatechange',handleIeState);
        output_str("attachEvent ret = " + ret);
      }
      document.getElementsByTagName("head")[0].appendChild(scriptEl);
    }

    /* function to print to the the output_area div */
    function output_str(str){
      var da = document.getElementById("output_area");
      da.innerHTML += str + "<br/> ";
      da.scrollTop = da.scrollHeight;
    }
    </script> 

  </body>
</html>


The contents of the 2 .js files dynamically loaded in the HTML above. 
/* gen_include.js */
(function()
{
  window.gen_include_js = {};
  window.gen_include_js.loaded = true;
}
)();

/* gen_include2.js */
(function()
{
  window.gen_include_js2 = {};
  window.gen_include_js2.loaded = true;
}
)();
]]> http://software.intel.com/en-us/blogs/2010/05/22/dynamically-load-javascript-with-load-completion-notification/feed/ 0 Some web apis for the webs and the apps http://software.intel.com/en-us/blogs/2010/04/12/some-web-apis-for-the-webs-and-the-apps/ http://software.intel.com/en-us/blogs/2010/04/12/some-web-apis-for-the-webs-and-the-apps/#comments Mon, 12 Apr 2010 16:55:30 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2010/04/12/some-web-apis-for-the-webs-and-the-apps/ Late last week we released to the webs our project's first set of web apis.

This first set of APIs are simple, and meant to provide the app developer with a bit more device side contextual information so they might use it to provide a better experience for their user.

Here's some code you can embed to play around with our CPU / Power / Connection Indicator widget:

<div id="cpci_div"></div>
<script type="text/javascript"
src="http://software.intel.com/sites/whatif/webapis/intelwebapis.js"></script>
<script type="text/javascript"
src="http://software.intel.com/sites/whatif/webapis/widget/cpc/IntelCPCIWidget.js"></script>
<script type="text/javascript">
(function() {
//modified update interval - updates every 1 second instead of default 5
var theIntelCpciInst = new IntelCPCIWidget('cpci_div',{'updateInt':1});
})();
</script>



Our next APIs will be building blocks that help with more compute intensive problems - such as image and video processing.

If you're already coding in C/C++ you should check out our Media SDK forum and my coworker Eric Sardella's blog.

If you're strictly a web app developer - stay tuned baby! :).

If you want to tell us what compute intensive APIs would help your web app development - we've got a forum for that.

]]> http://software.intel.com/en-us/blogs/2010/04/12/some-web-apis-for-the-webs-and-the-apps/feed/ 0 Code Bubbles may blow your mind http://software.intel.com/en-us/blogs/2010/03/12/code-bubbles-may-blow-your-mind/ http://software.intel.com/en-us/blogs/2010/03/12/code-bubbles-may-blow-your-mind/#comments Fri, 12 Mar 2010 18:30:03 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2010/03/12/code-bubbles-may-blow-your-mind/ This morning I took at look at Code Bubbles - a project by Andrew Bragdon

This demo really blew my mind - and I felt I needed to put up a post about it. Good work like this deserves attention.

I haven't seen many development tools that are as fresh and seem so useful in making code maintenance and bug fixing more efficient.
I really like how Code Bubbles connects functional blocks of codes and uses color to differentiate different links of bubbles in a 2d space.

I spend a lot of time looking at a lot of code in different files and tabs in my editor. The bubbles and 2d space is a brilliant way of connecting things together to create a context that is specific to the thing I'm doing right now.
This is in stark contrast to code parsers creating ginormous lists of class and function references or opening 6000 tabs in my editor ...or opening up giant graphical trees that extend back to the root object.

I hope the implementation is as good as the presentation!

]]> http://software.intel.com/en-us/blogs/2010/03/12/code-bubbles-may-blow-your-mind/feed/ 0 HTML5 offline web apps - code experiments with several browsers http://software.intel.com/en-us/blogs/2009/12/11/html5-offline-web-apps-code-experiments-with-several-browsers/ http://software.intel.com/en-us/blogs/2009/12/11/html5-offline-web-apps-code-experiments-with-several-browsers/#comments Fri, 11 Dec 2009 19:03:33 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/12/11/html5-offline-web-apps-code-experiments-with-several-browsers/ Last week I was discussing HTML5 offline web app features with some coworkers and I realized it was time to play around with a bit of code.
You can always support your points in a geek discussion by pop'n open a big ol can o whup'code right? Until someone brings out the newclear option! Thank you, I'm here all week ;)

Okay - my goal was to get a some first hand experience with the code and then run it in several different browsers. I chose the browsers listed below because they are available on a variety of client device types and operating systems.
UPDATE 09/11/09 7.44pm:Added results below for iPhone Safari browser!

Feel free to make a case to to run the code in some other browser - I'll add the info to the results too.

I'm by no means and expert here. I've done a little reading and a little coding and I'm hoping you readers will share your experiences and advice. I'll update the post with the good stuff.

Heavy opinion section

There is no such thing as "offline web apps". The words "offline web apps" IMHO are misleading because for some folks it brings to mind "stand alone apps" such as native apps, or runtime based apps written for a java vm or adobe air.
In my opinion there are only "web apps". Some of them can work offline.
Web apps must be able to take full advantage of the client device, the cloud and work when a network connection is not available.

Reference materials and background reading

*) Offline app section of HTML5 spec.
*) W3C Web Storage technical docs
*) text/cache-manifest mime type details and file format.
*) Mark Finkle's post about the Firefox 3 implementation with a sample app.
*) John Resig's post about online / offline events

The code

The goal for this code was to experiment with the three main areas of functionality that allow web apps to work offline.
*) Online/Offline state: the ability to detect when the client device is online vs offline
*) Application cache: the ability of the web app to instruct the browser to cache the web app's resources (html, scripts, images, arbitrary data) for offline use.
*) Local storage: the ability to store application runtime data on the client device and retrieve it after browser shutdown/startup.

Note: when I ran this code in the various browsers I was also tailing my apache access log to watch how they were requesting content. This was helpful in observing caching behaviors and checking that when a browser thought it was offline it wasn't connecting to the web server to get content ;)

How to instruct the browser to use an application cache. 
  < !DOCTYPE HTML >
  < HTML manifest="./cache.manifest" >
    ...the rest of your HTML5 markup.
  < /HTML >


Here is my app's cache.manifest file. This must be served as Content-Type: text/cache-manifest 
  CACHE MANIFEST
  # comment with version string to tweak v 6
  theapp.html
  blank.png
  bug.png
  heart.png
  arb_bin_data.php

  NETWORK:
  noncached.html

  FALLBACK:
  / ./offline.html


The javascript I wrote to experiment with HTML5 offline app features 
  /* print out some information about offline features */
  function print_offline_support(){
    debug_out("navigator.onLine defined: " +
      (typeof(navigator.onLine) == 'undefined' ? "no" : "yes"));

    debug_out("window.localStorage defined: " +
      (typeof(window.localStorage) == 'undefined' ? "no" : "yes"));

    debug_out("window.applicationCache defined: " +
      (typeof(window.applicationCache) == 'undefined' ? "no" : "yes"));

    try{
      document.body.addEventListener("online", function(){
        debug_out("got event: document.body.online");
      }, false);

      document.body.addEventListener("offline", function(){
        debug_out("got event: document.body.offline");
      }, false);

      debug_out("document.body.online and document.body.offline events: yes");
    }
    catch(err){
      debug_out("document.body.online and document.body.offline events: no");
      debug_out(" event reg debug: " + err);
      if(typeof(navigator.onLine) != 'undefined')
      {
        debug_out(" using cheezy_online_events...");
        cheezy_online_events();
      }
    }

    if(typeof(navigator.onLine) != 'undefined'){
      debug_out("online state:" + (navigator.onLine == true ? "online" : "offline"));
    }
    else{
      debug_out("online state: undefined");
    }
  }

  /* cheezy way to check online status ..and possibly generate
     an event in the app */
  function cheezy_online_events(){
    debug_out("online state:" + (navigator.onLine == true ? "online" : "offline"));
    setTimeout(cheezy_online_events, 5000);
  }

  /* store some string data to local storage
     This is using some text input elements on the page
     for input.*/
  function store_local(domid_prefix){
    debug_out("+,store_local()");
    var keyinput = document.getElementById(domid_prefix + "key").value;
    var valinput = document.getElementById(domid_prefix + "val").value;
    try{
      if(typeof(window.localStorage) != 'undefined'){
        window.localStorage.setItem(keyinput,valinput);
      }
      else{
        throw "window.localStorage, not defined";
      }
    }
    catch(err){
      debug_out("store_local,error," + err);
    }
    debug_out("-,store_local()");
  }

  /* load some string data from local storage
     This is using some text input elements on the page
     for the key name input and value output.*/
  function load_local(domid_prefix){
    debug_out("+,load_local()");
    var keyinput = document.getElementById(domid_prefix + "key").value;
    var valoutput = document.getElementById(domid_prefix + "val");
    try{
      if(typeof(window.localStorage) != 'undefined'){
        valoutput.value = window.localStorage.getItem(keyinput);
      }
      else{
        throw "window.localStorage, not defined";
      }
    }
    catch(err){
      debug_out("store_local,error," + err);
    }
    debug_out("-,load_local()");
  }

  /* see http://dev.w3.org/html5/spec/offline.html#dom-appcache-update*/
  function update_app_cache(){
    debug_out("+,update_app_cache()");
    try{
      if(typeof(window.applicationCache) != 'undefined') {
        window.applicationCache.update();
      }
      else{
        throw "window.applicationCache, not defined";
      }
    }
    catch(err){
      debug_out("update failed,error," + err);
    }
    debug_out("-,update_app_cache()");
  }

  /* see http://dev.w3.org/html5/spec/offline.html#dom-appcache-swapcache*/
  function swap_app_cache(){
    debug_out("+,swap_app_cache()");
    try{
      if(typeof(window.applicationCache) != 'undefined') {
        window.applicationCache.swapCache();
      }
      else{
        throw "window.applicationCache, not defined";
      }
    }
    catch(err){
      debug_out("swap failed,error," + err);
    }
    debug_out("-,swap_app_cache()");
  }

  /* function to print to the text area element with the id="debug_area" */
  function debug_out(str){
    document.getElementById("debug_area").value += str + "\n";
  }


Results
Firefox v 3.5.5, Windows PC
Output of print_offline_support() function from above:
navigator.onLine defined: yes
window.localStorage defined: yes
window.applicationCache defined: yes
document.body.online and document.body.offline events: yes
online state:online

Does the browser request manifest.cache and its entries?
Yes.

If you have multiple versions of firefox installed be prepared for headaches. I
had 3.5.5 and 3.6b4 installed and just about went crazy trying to figure out why they
wouldn't request the cache.manifest and the entries inside. I finally uninstalled both,
reinstalled 3.5.5 and starting using different profiles. Just a guess: they were both sharing the same
profile directory and confusing each other because of that. I'm now using separate "developer"
profile directories for each version and things are working more or less as expected.
See this page about profiles at Mozilla.

Can "offline mode" can be invoked by app developer for testing?
Yes, go to the File menu and select the "work offline" menu item.

I use this feature to to cause the online / offline events to be fired through
document.body.online and document.body.offline handlers. NICE!

Does window.localStorage.getItem() / setItem() work after browser shutdown / restart?
Yes.

Some window.applicationCache.update() observations.
Browser requests cache.manifest and, if modified also requests entries in the
manifest.

Some observations window.applicationCache.swapCache() observations.
An exception is thrown.
This page at Mozilla says swapCache() not yet supported.

Disconnect and disable network adapters. Does app work when going to url in browser?
Yes! But ... navigator.onLine was still == true.

The online / offline events seem a little flakey to me. It seems as thought the browser really wants
to to think it is online. Even when I've explicitly disabled all the network adapters, disconnected
networks, turned off the web server :).


Firefox v 3.6b4, Windows PC
Output of print_offline_support() function from above:
navigator.onLine defined: yes
window.localStorage defined: yes
window.applicationCache defined: yes
document.body.online and document.body.offline events: yes
online state:online

Does the browser request manifest.cache and its entries?
Yes.

Seemed to work the same as FF 3.5.5. FYI - recommend two different profiles if using
two diff versions of the browser. See this page at Mozilla.

Can "offline mode" can be invoked by app developer for testing?
Yes, go to the File menu and select the "work offline" menu item.

Seems to work like FF 3.5.5 and sent events to document.body.online and document.body.offline event listeners.

Does window.localStorage.getItem() / setItem() work after browser shutdown / restart?
Yes.

Some window.applicationCache.update() observations.
Seemed to work the same as FF 3.5.5. (see comment above)

Some observations window.applicationCache.swapCache() observations.
Seemed to work the same as FF 3.5.5. (see comment above)

Disconnect and disable network adapters. Does app work when going to url in browser?
Yes! ...and it seemed to track offline / online state better than FF 3.5.5. Online/offline events
seemed to be consistent with disabling my network adapters whereas they weren't in FF 3.5.5.


Chrome v 4.0.223.16, Windows PC
Note: Chrome does have offline support through Gears and even through the results below aren't as good as Firefox and Safari, I fully expect Chrome to catch up based on this article.
Output of print_offline_support() function from above:
navigator.onLine defined: yes
window.localStorage defined: yes
window.applicationCache defined: no
document.body.online and document.body.offline events: yes
online state:online

Does the browser request manifest.cache and its entries?
No.

Can "offline mode" can be invoked by app developer for testing?
I haven't found one.

Does window.localStorage.getItem() / setItem() work after browser shutdown / restart?
Yes.

Some window.applicationCache.update() observations.
n/a. window.applicationCache not defined.

Some observations window.applicationCache.swapCache() observations.
n/a. no window.applicationCache not defined.

Disconnect and disable network adapters. Does app work when going to url in browser?
n/a. I wouldn't expect this to work becuase the application cache wasn't available.


Safari v 4.0.3 (531.9.1), Windows PC
Output of print_offline_support() function from above:
navigator.onLine defined: yes
window.localStorage defined: yes
window.applicationCache defined: yes
document.body.online and document.body.offline events: yes

Does the browser request manifest.cache and its entries?
Yes.

Can "offline mode" can be invoked by app developer for testing?
I haven't found one.

Does window.localStorage.getItem() / setItem() work after browser shutdown / restart?
Yes.

Some window.applicationCache.update() observations.
Browser requests cache.manifest, and if modified, the entries declared inside.

Some observations window.applicationCache.swapCache() observations.
I'm not really sure how to use swapCache() yet even after looking at the spec section a few
times.

Seems to do something on first call after window.applicationCache.update(). On second call throws
INVALID_STATE_ERR exception.

Disconnect and disable network adapters. Does app work when going to url in browser?
Yes!

Note that Safari, similar to FF 3.5.5, did not seem to track online / offline state as I enabled/disabled
my network adapters. However, when I closed and reopened the browser the app did work and
navigator.onLine was set == false.


Safari v 4.0 (526.16), iPhone OS 3_1_2
Output of print_offline_support() function from above:
navigator.onLine defined: yes
window.localStorage defined: yes
window.applicationCache defined: yes
document.body.online and document.body.offline events: yes
online state:online
Does the browser request manifest.cache and its entries?
Yes.
Can "offline mode" can be invoked by app developer for testing?
Sort of: on the iPhone I just used "airplane mode" to test offline functionality. It worked great!
Does window.localStorage.getItem() / setItem() work after browser shutdown / restart?
Yes.
Some window.applicationCache.update() observations.
Browser requests cache.manifest, and if modified, the entries declared inside. Good!
Some observations window.applicationCache.swapCache() observations.
Same as Windows PC Safari (see comments above)
Disconnect and disable network adapters. Does app work when going to url in browser?
Yes!

On the iPhone I just turned on airplane mode to test this. It totally worked! Kudos to Apple!.


Internet Explorer v 8.0.6001.18702, Windows PC
Output of print_offline_support() function from above:
navigator.onLine defined: yes
window.localStorage defined: yes
window.applicationCache defined: no
document.body.online and document.body.offline events: no
 event reg debug: TypeError: Object doesn't support this property or method
 using cheezy_online_events...
online state:online

Does the browser request manifest.cache and its entries?
No.

Can "offline mode" can be invoked by app developer for testing?
Yes. Go to the File menu, select the "Work Offline" menu item.

Using this menu did cause navigator.onLine to be set to true / false. This allowed
my cheezy_online_events() function (in code above) to pick this up. This is good!

Does window.localStorage.getItem() / setItem() work after browser shutdown / restart?
Yes.

Some window.applicationCache.update() observations.
n/a. window.applicatoinCache not defined.

Some observations window.applicationCache.swapCache() observations.
n/a. window.applicatoinCache not defined.

Disconnect and disable network adapters. Does app work when going to url in browser?
n/a. I wouldn't expect this to work becuase the application cache wasn't available.

Note: Internet Explorer 8 did track the online / offline state as I enabled / disabled network adapters. (as seen via cheezy_online_events()).


Opera v 10.10 build 1893, Windows PC
Output of print_offline_support() function from above:
navigator.onLine defined: yes
window.localStorage defined: no
window.applicationCache defined: no
document.body.online and document.body.offline events: yes
online state:offline

Does the browser request manifest.cache and its entries?
No.

Can "offline mode" can be invoked by app developer for testing?
Yes. Go to the File menu, select the "Work Offline" menu item.

Note: using this menu did not cause offline / onlines events to be sent to
document.body.offline and document.body.online listeners.

Does window.localStorage.getItem() / setItem() work after browser shutdown / restart?
n/a. window.localStorage not defined.

Some window.applicationCache.update() observations.
n/a. window.applicatoinCache not defined.

Some observations window.applicationCache.swapCache() observations.
n/a. window.applicatoinCache not defined.

Disconnect and disable network adapters. Does app work when going to url in browser?
n/a. I wouldn't expect this to work becuase the application cache wasn't available.

Note: Opera did not seem to track online / offline state as I enabled / disabled network adapters.

]]> http://software.intel.com/en-us/blogs/2009/12/11/html5-offline-web-apps-code-experiments-with-several-browsers/feed/ 0 Howto: javascript objects with public and private data and functions http://software.intel.com/en-us/blogs/2009/11/25/howto-javascript-objects-with-public-and-private-data-and-functions/ http://software.intel.com/en-us/blogs/2009/11/25/howto-javascript-objects-with-public-and-private-data-and-functions/#comments Thu, 26 Nov 2009 00:18:15 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/11/25/howto-javascript-objects-with-public-and-private-data-and-functions/ I've been coding like mad lately - pulling together code in Javascript, HTML and C++ for the web APIs that we're working on.
See my other posts: here and here for more context.

One thing that had been nagging me about my own practice coding in javascript is that I still hadn't started implementing javascript objects with private data and functions. I knew it was possible but since the actual code layout was not obvious (at least as obvious as in C++) I procrastinated.

I'm happy to say I'm now creating my objects with private data and functions. I learned how to do this by reading this page by Douglas Crockford and by practicing the technique in a real project I'm working on.

Why do I want private data and methods in javascript?
I want them because I want to hide internal data and functions that implement the core functionality of my object behind a clean public interface. I want to disallow other code from changing my object's internal implementation except for the cases that have been explicitly allowed *through a public interface*.

I believe this also helps improve security because although a malicious script can change a public function of an object by assigning a different one to the same name; it can't change private functions and the private data and private function references they use.

I can always learn more about both javascript and security, so please feel free to help me along - especially with tips and tricks about defensive programming in javascript and web apps.

So, without further ado, here is some example code. This is a javascript object that includes both public functions and private functions and data:

FYI - I've updated this code based on Ruud's comment below and the link with Chris Heilmann's solution.


/* CODE START - spell checker off :) ---------------------------------------*/

/*  ObjectWithPrivates
    A javascript object with public and private data and functions */
function ObjectWithPrivates(){

  /* assign 'this' to 'that' so private functions can access this as that.
     Confusing? just remember: "this, that it's all the same!" :)
     From Doug Crockford's page:
     This is a workaround for an error in the ECMAScript Language
     Specification which causes this to be set incorrectly for inner
     functions.
     Note that I don't actually use the 'that' variable in
     the code below because my private functions use the privfuncs, privdata
     and pubfuncs containers to get at stuff. In any case, its a good
     convention to follow so that private functions can access 'this'
     through 'that' */
  var that = this;

  /* container for private data - organizational thing -
     remember, since variables are scoped to the function block in
     javascript all inner functions inside this function, our object's
     constructor, have access to it. the outside world does not.
     tada private data! */
  var privdata = {
    'data1':'this is some private data - data1',
    'data2':'some more private data - data2'
  };

  /* private function container
     mainly for code organization and readability */
  var privfuncs = {};

  /* public function container
     we want private functions to be able to call public
     functions, but they should only do this through this container
     because the container can't be modified by the outside world directly!

     Note below we can pick and choose which funcs from pubfuncs we
     reveal through the array that we return.
  */
  var pubfuncs = {};

  /* public shared data container.
    This seems to be needed so that both internal and external code can modify shared
    data and see each other's changes. I've found that just using non array/object
    types doesn't work. This is sort of redundant becuase all of this data could
    just be revealed through this, but returning it through the array below
    makes it much more clear what the public interface is ..and that is a good thing*/
  var pubdata = {};

  /* a private function - just displays a message */
  privfuncs.priv_func_1 = function(){
    alert("look everyone, this object has privates! - priv_func_1");
  }

  /* another private function - calls a public function
     through the pubfuncs container.
     This will call the correct pub_func_2() even if some other code
     changes this.pub_func_2 from outside. Cool eh? */
  privfuncs.priv_func_2 = function(){

    /* always call the correct pub_func_2() */
    pubfuncs.pub_func_2();
  }

  /* a public function - just calls some private functions */
  pubfuncs.pub_func_1 = function(){
    privfuncs.priv_func_1();
    privfuncs.priv_func_2();
  }

  /* second public function - displays a message */
  pubfuncs.pub_func_2 = function(){
    alert("I'm the original pub_func_2() - private data: " + privdata['data1']);
  }

  /* Now for the public interface.
     Return an array that reveals the public interface - nice and obvious what is public*/
  return {
    pub_func_1:pubfuncs.pub_func_1,
    pub_func_2:pubfuncs.pub_func_2,
    shdata:pubdata
  }
}

/* Lets play with our object and its privates...
   Be sure to look at 'obWithPrivs' in a dom inspector tool like the
   one that comes with firebug. Wow, no public data members, just the
   public functions! */
var obWithPrivs = new ObjectWithPrivates();

/* cheezy way to inspect the members of the object without
   a proper dom inspector tool*/
for (var membr in obWithPrivs){
  alert("found: obWithPriv." + membr);
}

/* call a public function */
obWithPrivs.pub_func_1();

/* okay - be evil and and install a new pub_func_2 from the outside
   then call pub_func_1() again ...becuase we know it calls private code
   that calls pub_func_2 internally */
obWithPrivs.pub_func_2 = function(){
  alert("I'm the evil pub_func_2");
}

/* the new, evil, pub_func_2() will NOT be called from
   the private code becuase the private code still references
   the original pub_func_2()*/
obWithPrivs.pub_func_1();

/* the new, evil, pub_func_2() can still be called from the outside - but
   it wasn't able to chain itself to the private functionality ! */
//alert("calling pub_func_2 directly...");
//obWithPrivs.pub_func_2();

/* CODE END ------------------------------------------------------------*/
]]> http://software.intel.com/en-us/blogs/2009/11/25/howto-javascript-objects-with-public-and-private-data-and-functions/feed/ 0 A little list of portland tech event links http://software.intel.com/en-us/blogs/2009/11/03/a-little-list-of-portland-tech-event-links/ http://software.intel.com/en-us/blogs/2009/11/03/a-little-list-of-portland-tech-event-links/#comments Tue, 03 Nov 2009 23:08:47 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/11/03/a-little-list-of-portland-tech-event-links/ This afternoon I needed to provide a coworker with a list of links for local (Portland Oregon) events.

I thought it would be something valuable to share with you too.

The links actually cover tech, blogging and entrepreneur oriented events. Many of the events found at these sites are free or very low cost. All of them provide a great opportunity to meet people and learn a little about the subject at hand.

While attending one of these events myself I had a little epiphany: in the age of digitally connected everything - the face to face and handshake connection is still very very important ...and fun!

Here's the list:

Oh - and I'll be attending the Portland Web Innovators event tomorrow.

]]> http://software.intel.com/en-us/blogs/2009/11/03/a-little-list-of-portland-tech-event-links/feed/ 0 api and widget demo: cpu power connection mashed with video http://software.intel.com/en-us/blogs/2009/10/28/api-and-widget-demo-cpu-power-connection-mashed-with-video/ http://software.intel.com/en-us/blogs/2009/10/28/api-and-widget-demo-cpu-power-connection-mashed-with-video/#comments Wed, 28 Oct 2009 23:49:38 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/10/28/api-and-widget-demo-cpu-power-connection-mashed-with-video/ Here are a couple of presentations I've been making a lot lately - about our work to expose platform/device capabilities to web developers.

After you look at the technology, think about the kinds of device capabilities, hardware and software, that would make your web application better. Then share them with us - we're listening.
If you need some food for thought take a look at this blog post - where I list several API drafts we recently submitted to the W3C Device API working group.

"The story" gives you the context. "The Technology" dives a little deeper into the details.

]]> http://software.intel.com/en-us/blogs/2009/10/28/api-and-widget-demo-cpu-power-connection-mashed-with-video/feed/ 0 API drafts posted at W3C - web developer comments welcome! http://software.intel.com/en-us/blogs/2009/10/22/api-drafts-posted-at-w3c-web-developer-comments-welcome/ http://software.intel.com/en-us/blogs/2009/10/22/api-drafts-posted-at-w3c-web-developer-comments-welcome/#comments Thu, 22 Oct 2009 19:16:06 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/10/22/api-drafts-posted-at-w3c-web-developer-comments-welcome/ The other day ago our team, including Clayne Robison who also has a blog here on ISN, posted some API drafts to the W3C's Device API and Policy Working Group.

In a previous post I kicked off a conversation with web developers about exposing device capabilities as javascript APIs and widgets in the browser.

Here's your chance to comment and help inform our web developer enabling activities. Tell us about how having better access to the device's hardware capabilities would make your web app implementation easier. Maybe you have a use case you would like to share?

Here is a list of APIs for device capabilities we proposed.

API Description
Compass Allows web apps to make use of a device's compass. The app can detect the
current orientation and receive asynchronous updates when the
orientation changes.
Power Allows web apps to learn about the device's power state.
The app can detect the current power level, time remaining and receive
asynchronous updates about power level changes.
CPU Allows web apps to learn about the device's CPU - number of processors,
frequency, cpu usage levels.
The app can detect the current cpu usage and receive asynchronous
updates about cpu usage.
Display Allows web apps to learn about the device's display capabilities - dots per inch,
supported orientations, brightness etc.
The app can detect the current orientation and brightness and receive
asynchronous updates about display orientation and brightness changes.
Connection Allows web apps to learn about the device's network status and ability to
connect to services over the current network.
The app can detect check if an URL is reachable and check the latency
to and URL.
The app can receive asynchronous updates about network and service changes.
Thermal Allows web apps to learn about thermometers connected to the device.
The app can detect the current temperature and receive asynchronous updates
about temperature changes.
Audio Allows web apps to learn about the device's audio capabilities.
The app can determine which audio codecs are installed. The app can
also learn about speakers, microphones, lines in and lines out.
Video Allows web apps to learn about the device's video capabilities.
The app can determine which video codecs are installed and what formats
and profiles they support. The app can also determine if codecs support
hardware acceleration.
Input Allows web apps to learn about the device's user input capabilities.
The app can determine if the device has a touch screen, if it
has multi-touch support, if a physical keyboard is present or if a software
keyboard is visible. The app can receive asynchronous updates about
physical keyboard attach / detach. The app can receive asynchronous updates
about physical pointer attach / detach.

You can see the detailed API specs and example use cases at the WC3's site.
This is only the beginning. Stay tuned to the blog, or my tweets, for more API, widget and mashup proposals coming in the near future.

]]> http://software.intel.com/en-us/blogs/2009/10/22/api-drafts-posted-at-w3c-web-developer-comments-welcome/feed/ 0 Take your knowledge of javascript to the nerd level http://software.intel.com/en-us/blogs/2009/10/15/take-your-knowledge-of-javascript-to-the-nerd-level/ http://software.intel.com/en-us/blogs/2009/10/15/take-your-knowledge-of-javascript-to-the-nerd-level/#comments Thu, 15 Oct 2009 20:35:23 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/10/15/take-your-knowledge-of-javascript-to-the-nerd-level/ Today I stumbled upon a really good presentation by Douglas Crocford about JavaScript.
When I started I was just looking for the correct pronunciation for JSON (javascript object notation). When I finished I had learned a few mind blowing things about JavaScript.

Here is a teaser to encourage you to watch the video.
Curly brace style REALLY IS MEANINGFUL in JavaScript.
Look at the following two snippets (from the video):

This might work well in other languages:

   block

   {
      ...
   }


This works well in JavaScript:

   block {
      ...
   }

Enjoy! (video link )

The downside to all this: I have a lot of curly braces to go change - uggg.

Here is where you go to take your JavaScript knowledge to the nerd level.

Oh, if you didn't watch the video, Doug Crockford pronounces JSON the same as the name "jason".

]]> http://software.intel.com/en-us/blogs/2009/10/15/take-your-knowledge-of-javascript-to-the-nerd-level/feed/ 0 Along for the ride http://software.intel.com/en-us/blogs/2009/10/09/along-for-the-ride/ http://software.intel.com/en-us/blogs/2009/10/09/along-for-the-ride/#comments Fri, 09 Oct 2009 19:26:52 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/10/09/along-for-the-ride/ Some of my most memorable and influential experiences happened because someone invited me along for the ride.

When I was a kid my dad frequently took me with him under the car when he was changing out an engine. He let me hang and watch when he was building something out of wood and when he used his volt meter and oscilloscope to fix our Atari 400 (that still blows my mind). My mom would frequently take me along to her office. Later she even hired me to clean bathrooms and take out garbage on the weekends - and then fired me for not showing up or doing a crappy job :)

As an adult, invitations to come along for a ride are more subtle but they are still there: a neighborhood event, user group gathering, "getting coffee", or "check out the new cedar bench I built".
I see these invitations to ride come from email, twitter, facebook and right there on my street (just gotta walk outside).

As adults, how many of these invites do we accept?

More importantly, how many invites are we putting out there: to our kids, our neighbors, our coworkers and our followers on twitter?
Many things we do may seem mundane but what occurs when we invite someone along for the ride can be quite influential.

]]> http://software.intel.com/en-us/blogs/2009/10/09/along-for-the-ride/feed/ 0 social media -> web apis -> mobile device -> web apis -> social media http://software.intel.com/en-us/blogs/2009/10/08/social-media-gt-web-apis-gt-mobile-device-gt-web-apis-gt-social-media/ http://software.intel.com/en-us/blogs/2009/10/08/social-media-gt-web-apis-gt-mobile-device-gt-web-apis-gt-social-media/#comments Thu, 08 Oct 2009 21:51:56 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/10/08/social-media-gt-web-apis-gt-mobile-device-gt-web-apis-gt-social-media/ Last night I attended the local "demolicious" event to present a web developer enabling demo I've been working on with my coworkers Clayne and Rich here in SSG.
Many thanks to PDX web innovator group for organizing and to Portland Incubator Experiment (PIE) for hosting in their sweet NW Portland space.

One of the demos I saw, which really made an impression on me, was an app that used twitter to make phone call with some text to speech tech, and then allowed the person who answered to say/record something that was then posted back to twitter as an audio file.
During the demo, Travis Spencer (his blog post here), had his app call his cell phone, he left a message, and then played it back to the audience when it showed up on twitter (here).

Aside from the fact that it all just worked (and we all know how demos can go wrong), this was cool to me because of the connection between social media, the twillio APIs and the *mobile device*.

Smart people are spending time making the web - the social web - do really cool things with our devices.
Exposing capabilities of the device to web developers will help that kind of innovation flourish.

]]> http://software.intel.com/en-us/blogs/2009/10/08/social-media-gt-web-apis-gt-mobile-device-gt-web-apis-gt-social-media/feed/ 0 conversation.start( enabling web developers) http://software.intel.com/en-us/blogs/2009/10/07/conversationstart-enabling-web-developers/ http://software.intel.com/en-us/blogs/2009/10/07/conversationstart-enabling-web-developers/#comments Wed, 07 Oct 2009 22:02:43 +0000 Andy Idsinga (Intel) http://software.intel.com/en-us/blogs/2009/10/07/conversationstart-enabling-web-developers/ This month I’m starting a new conversation with web developers, about, you read it right: enabling web developers. If you’re not a web developer, stay tuned - didn’t you know everyone’s a web developer now? ;)

It starts here and now on the blog and this evening face to face when I attend this month’s PDX Web Innovators Demolicious event.
Props to TIE Oregon for hosting a “Cloud Computing” event last month that turned me on to PDX web innovators in the first place.

Okay, “web apps” a big subject area, so let’s narrow it down a little.

I’m very interested [read: my day job] in finding ways to provide web developers with *web browser access* to the kinds of cutting edge capabilities that exist on modern, web connected devices like netbooks, smart phones, mobile internet and gaming devices.

Almost all of our devices connect to different types of networks – cell networks, wifi networks, bluetooth device networks. We frequently use GPS / location awareness to find things. We share our lives with cameras on our phones and laptops! More and more devices are including 3d acceleration and support user input from accelerometers.

OK, deep breath. The point is that these kinds of capabilities are not simply available to web developers through the browser. The key word there was “simply”. Some software teams could certainly write a whole software stack with native plugins and all – but that’s a pretty high bar for many projects.

So, my sense is that better access to device capabilities, done in a way that caters to web developers (i.e. javascript and html embedding) would be great for web developers.

What do you think?
Is there a particular device capability that you could have made use of in your web app?
Are you trying to figure out how to access some capability in a project currently under development?

In my next post I’ll share some technology and thoughts about bite sized APIs, widgets and mashup demos that expose more platform goodness to the web developer. Just as important, I'll be asking for your thoughts.

]]> http://software.intel.com/en-us/blogs/2009/10/07/conversationstart-enabling-web-developers/feed/ 0