Web Info & Tutorials

May 13th, 2008

BMO FINANCIAL GROUP MAKES $2-MILLION GIFT TO SUPPORT THE CAMPAIGN FOR BC CHILDREN

“BMO Financial Group’s heritage to the Campaign for BC Children, the maximal in the bank’s story in BC, is supported on the belief that we hit a key persona to endeavor in serving to secure that our communities rest brawny and vibrant”

Largest heritage in bank’s story in BC directed to newborn Emergency Department VANCOUVER, May 12 /CNW/ - BC Children’s Hospital Foundation declared today that BMO Financial Group has prefabricated a $2-million gift to … via CNW Group

May 13th, 2008

TIMELAPSE CSS


Matthew Buchanan had a little fun and created a Timelapse CSS example that lets you walk through the process of how a browser would put together a page if it was a human artist:

When building website templates, I’m constantly switching between a view of my CSS code and a view of the page I’m working on in a browser. At my most fevered I’m switching from one to the other after every couple of amendments, to ensure my additional rules are having the intended effect. Over time, were I to record this incremental buildup, it would paint a reasonably good picture of my approach to converting a design comp to a CSS layout.

With this in mind, I thought it might be useful to try to capture the process automatically and then play it back. I’ve seen this done using a collection of manual screen captures, but that didn’t seem a particularly elegant or easily reproducible solution.

As a proof of concept I cobbled together a (stylistically unsound) function to traverse the stylesheets of the current page (in reverse order) and remove a property from each rule every tenth of a second.

JAVASCRIPT:
  1.  
  2. function timelapseRemoveCss() {
  3.     var interval=0;
  4.     for(var i=document.styleSheets.length-1;i>=0;i--){
  5.         rules=document.styleSheets[i].cssRules;
  6.         for(var j=rules.length-1;j>=0;j--){
  7.             var attributes=rules[j].style.length;
  8.             for(var k=0;k<attributes ;k++){
  9.                 interval+=100;
  10.                 var timeout = "document.styleSheets["
  11.                     +i+"].cssRules["+j+"].style"
  12.                     +".removeProperty(document"
  13.                     +".styleSheets["+i+"].cssRules["
  14.                     +j+"].style["+0+"])";
  15.                 setTimeout(timeout,interval);
  16.             }
  17.         }
  18.     }
  19. }
  20.  

May 13th, 2008

WHAT’S IN A WINDOW.NAME?

Sometimes it is interesting to see that knowledge from the 10,000 B.C. period of web development can be used in new ways to create - to play it safely - interesting ideas.

Each window in a browser has a name property which became pretty much useless when we stopped using pop-up windows and tried to make them communicate with each other by name.

Thomas Frank, however wrote a small library that uses window.name to store session variables without having to resort to cookies and his research seems to prove that you can store up to two megabytes of data in window.name. As this property is available across page reloads it is a sort of session, but as the comments show the security aspects of it are just scary:

There is a cross domain flag in sessvars, but although it defaults to false, this just sees to that you don't get any other sites window.name garbage inside your sessvars by mistake. The actual data you set will be available for other scripts on other domains to look at – and also to anyone able to type javascript:alert(window.name) in the browser's address bar

May 13th, 2008

INPUTEX: JSON FORM BUILDER

inputEx is "a javascript framework to build fields and forms" created by Eric Abouaf. The framework uses a JSON format to describe a form, such as:

JAVASCRIPT:
  1.  
  2. {
  3.         "fields" : [
  4.                 {
  5.                         "type" : "group",
  6.                         "inputParams" : {
  7.                                 "fields" : [
  8.  
  9.                                 ],
  10.                                 "name" : "",
  11.                                 "tooltipIcon" : false,
  12.                                 "value" : {
  13.  
  14.                                 },
  15.                                 "optionsLabel" : "Options"
  16.                         }
  17.                 }
  18.         ],
  19.         "optionsLabel" : "Options"
  20. }
  21.  

which you can build with the help of the builder application.

Check out the getting started guide and if you like to build an application that looks like:

JAVASCRIPT:
  1.  
  2.    init: function() {
  3.       this.buildTree();
  4.       this.initContextMenu();
  5.       this.buildForm();
  6.       this.initEvents();
  7.       this.queryData();
  8.    }
  9.  

rather than HTML, then this could be the tool for you!

inputEx

May 13th, 2008

PERSEVERE: JSON STORAGE / APPLICATION SERVER

Kris Zyp of Sitepen has released Persevere:

An open source set of tools for persistence and distributed computing using intuitive standards-based JSON interfaces of HTTP REST, JSON-RPC, JSONPath, and HTTP Channels. The core of the Persevere project is the Persevere Server. The Persevere server includes a Persevere JavaScript client, but the standards-based interface is intended to be used with any framework or client.

The Persevere Server is an object storage engine and application server
(running on Java/Rhino) that provides persistent data storage of dynamic
JSON data in an interactive server side JavaScript environment. It is
currently in beta, and boasts a very solid feature set that should
interest JavaScript, Dojo and Ajax developers:

  • Create, read, update, and delete access to persistent data through
    a standard JSON HTTP/REST web interface
  • Dynamic object persistence - expando objects, arrays, and
    JavaScript functions can be stored, for extensive JavaScript persistence
    support
  • Remote execution of JavaScript methods on the server through
    JSON-RPC for a consistent client/server language platform
  • Flexible and fast indexed query capability through JSONPath
  • Comet-based data monitoring capabilities through HTTP Channels
    with Bayeux transport plugin/negotiation support
  • Data-centric capability-based object level security with user
    management, Persevere is designed to be accessed securely through Ajax
    with public-facing sites
  • Comprehensive referencing capabilities using JSON referencing,
    including circular, multiple, lazy, non-lazy, cross-data source, and
    cross-site referencing for a wide variety of object structures
  • Data integrity and validation through JSON Schema
  • Class-based data hierarchy - typed objects can have methods,
    inheritance, class-based querying
  • Pluggable data source architectures - SQL tables, XML files,
    remote web services can be used as data stores
  • Service discovery through Service Mapping Description

You can check out a live Persevere data grid demo that auto-syncs the grid using JS such as this:

JAVASCRIPT:
  1.  
  2. var persevereStores = dojox.data.PersevereStore.getStores(); // persevere stores are auto-generated
  3. customerStore = persevereStores.Customer; // and get the Customer store
  4. dataModel = new dojox.grid._data.DojoData(null,null,{/*rowsPerPage:12,*/store:customerStore,query:"",clientSort:true});
  5.  
  6. addItem = function() {
  7.         // need to specify the parent because the customerStore is hierarchical and the grid model will
  8.         // call newItem without any info who the parent
  9.         //customerStore.parentId="0.examples.customers";
  10.         grid.addRow({firstName: "firstName", lastName: "lastName",created:dojo.date.stamp.toISOString(new Date,{zulu:true})});
  11. }
  12.